У меня есть значение с именем $scope.title
в моем контроллере. Это значение инициализируется с помощью $scope.title= 'global.loading';
, У меня есть завод под названием Product
.
Мое представление вызывает директиву с помощью <menu-top ng-title="title"></menu-top>
, представление этой директивы - <span>{{title|translate}}</span>
.
Когда я хочу получить продукт, я делаю: Product.get(id)
. Их две возможности.
Первый (рабочий) → Мой продукт кэшируется в localstorage и заголовок заголовка в директиве.
Второй (не работает) → Мой продукт не кэширован, я вызываю свой WebService, помещаю ответ в кеш и возвращаю ответ. В этом случае заголовок обновляется (console.log
) в контроллере, но не в моей директиве...
angular.module('angularApp')
.directive('menuTop', function () {
return {
templateUrl: 'views/directives/menutop.html',
restrict: 'E',
scope:{
ngTitle: '=?'
},
link: function postLink(scope) {
scope.title = scope.ngTitle;
}
};
});
angular.module('angularApp')
.controller('ProductCtrl', function ($scope, $routeParams, Product) {
$scope.productId = parseInt($routeParams.product);
$scope.title = 'global.loading';
$scope.loading = true;
$scope.error = false;
$scope.product = null;
Product
.get($scope.productId)
.then(function(product){
$scope.loading = false;
$scope.title = product.name;
$scope.product = product;
}, function(){
$scope.error = true;
$scope.loading = false;
})
;
});
angular.module('angularApp')
.factory('Product', function ($http, responseHandler, ApiLink, LocalStorage, $q) {
var _get = function(id) {
return $q(function(resolve, reject) {
var key = 'catalog/product/' + id;
var ret = LocalStorage.getObject(key);
if (ret) {
return resolve(ret);
}
responseHandler
.handle($http({
method: 'GET',
url: ApiLink.get('catalog', 'product', {id: id})
}))
.then(function(response) {
if (response.product && response.product.name) {
LocalStorage.putObject(key, response.product, 60 * 5);
return resolve(response.product);
}
reject(null);
}, function() {
reject(null);
});
});
};
return {
'get': _get
};
});
Спасибо за помощь !
Как предложил Серхио Туленцев, вы можете использовать "@" как метод привязки.
Использование @будет интерполировать значение. Это означает, что вы можете использовать его как readonly следующим образом: ng-title="{{mytitle}}"
angular.module('angularApp')
.directive('menuTop', function () {
return {
templateUrl: 'views/directives/menutop.html',
restrict: 'E',
scope:{
ngTitle: '@'
},
link: function postLink(scope) {
scope.title = scope.ngTitle;
}
};
});
Также имейте в виду, что вы не должны использовать "ng" для своих пользовательских директив. ng используется для угловых туземных компонентов. Вы можете (должны) сохранить это соглашение об именах с вашим именем приложения. Как и для приложения " MyStats
", вы могли бы назвать свои компоненты ms-directivename
Если вам нужна дополнительная информация о привязках к директивам, вы можете обратиться к этой документации
{title: '@=ngTitle'}