Вход

Просмотр полной версии : Ui.router из директивы


neon_tmn
20.09.2016, 15:21
Добрый день.
в приложении создал конфиг:
angular.module("LiamoApp", ["ui.router"])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('#');

var UseURL = '/promadis';

$urlRouterProvider.otherwise(UseURL+"/");
// Now set up the states
$stateProvider
.state('index', {
url: "/",
templateUrl: UseURL + "index/index.html"
})
.state('offers', {
url: "/offers",
templateUrl: UseURL + "offers/index.html"
})
}])

Суть проблемы в том, что если я в шаблоне index.html делаю ссылку <a ui-sref="offers">Catalog</a>, то она работает, а если я в index.html делаю директиву и с помощью append добавляю ссылку, то она не работает, не кликабельна.
Сама директива
.directive("offersList", function() {
return function(scope, element, attributes) {
e = angular.element('<a ui-sref="offers">Catalog</a>');
element.append(e);
}
});

krasovsky
21.09.2016, 06:04
angular.element является оберткой для jq light. Есть мнение что таким образом вставленная ссылка не является частью приложения.

Суть эффекта в том, что если с помощью ajax запроса(через jq например) получить с бэка некий html и просто вставить его DOM, то ангуляр ничего о нем не знает. Что бы он начал обрабатываться этот html нужно предварительно скомпилить с текущим scope.
Пример http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

neon_tmn
21.09.2016, 06:37
angular.element является оберткой для jq light. Есть мнение что таким образом вставленная ссылка не является частью приложения.

Суть эффекта в том, что если с помощью ajax запроса(через jq например) получить с бэка некий html и просто вставить его DOM, то ангуляр ничего о нем не знает. Что бы он начал обрабатываться этот html нужно предварительно скомпилить с текущим scope.
Пример http://odetocode.com/blogs/scott/archive/2014/05/07/using-compile-in-angular.aspx

Сделал вот так:

e = '<a ui-sref="offers">Catalog1</a>';
var content = $compile(e)(scope);
element.append(content);

Сработало. Спасибо большое.

krasovsky
21.09.2016, 09:37
Сработало. Спасибо большое.
Пожалуйста, но яптибе не советовал вообще такими вещами заниматься в ангуляре, почитай о разработке директив

neon_tmn
22.09.2016, 12:08
Пожалуйста, но яптибе не советовал вообще такими вещами заниматься в ангуляре, почитай о разработке директив

Смотрел лекции от IТVDN по ангуляру.
Я что-то делаю не так?
Делаю директиву, которая выводит каталог предложений.

krasovsky
22.09.2016, 13:04
Вот тут погляди примеры https://habrahabr.ru/post/200620/
Я имею в виду то, что необходимости в использовании $compile в подавляющем числе случаев не требуется, как и в использовании compile,link (ты их увидишь в примерах)