我试图在我的指令中使用隔离范围放置一些默认值。基本上,当我的指令被绑定(bind)时,我需要使用范围对象进行一些 DOM 操作。下面是我的代码:
Controller :
angular.module('ctrl').controller('TempCtrl', function($scope, $location, $window, $timeout, RestService, CommonSerivce) {
$scope.showAppEditWindow = function() {
//Binding the directive isolate scope objects with parent scope objects
$scope.asAppObj = $scope.appObj;
$scope.asAppSubs = $scope.appSubscriptions;
//Making Initial Settings
CommonSerivce.broadcastFunction('doDirectiveBroadcast', "");
};
服务:
angular.module('Services').factory('CommonSerivce', function ($rootScope) {
return {
broadcastFunction: function(listener, args) {
$rootScope.$broadcast(listener, args);
}
};
指示:
angular.module('directives').directive('tempDirective', function() {
return {
restrict : 'E',
scope:{
appObj:'=asAppObj',
appSubs: '=asAppSubs'
},
link : function(scope, element, attrs) {},
controller : function ($scope,Services,CommonSerivce) {
//Broadcast Listener
$scope.$on('doDirectiveBroadcast', function (event, args) {
$scope.setDefaults();
});
$scope.setDefaults = function() {
//Setting Default Value
alert(JSON.stringify($scope.appSubs)); //Coming as undefined
};
},
templateUrl:"../template.html"
};
});
自定义指令元素:
<temp-directive as-app-obj="asAppObj" as-app-subs="asAppSubs" />
现在,问题是,在尝试访问指令内部默认方法中的隔离范围时,我得到一个未定义的值,而数据即将到来并绑定(bind)到 DOM。如何访问广播监听器中的隔离范围并修改指令模板 HTML?是否有另一种方法来处理这个问题?
最佳答案
问题是:当时 Angular 不更新其绑定(bind) 然而。
您不应该像这样访问您的变量,尝试使用 Angular js 绑定(bind)机制将其绑定(bind)到 查看 (例如使用 $watch )。绑定(bind)到父范围变量意味着您是 被动 ,只听变化和更新其他变量 或 您的看法 .这就是我们应该如何使用 Angular。
如果您仍然需要访问它。您可以尝试使用 $ timeout 的解决方法
$scope.setDefaults = function() {
$timeout(function () {
alert(JSON.stringify($scope.appSubs)); //Coming as undefined
},0);
};
DEMO
最好使用 $watch
angular.module('ctrl', []).controller('TempCtrl', function ($scope, $location, $rootScope) {
$scope.appSubscriptions = "Subscriptions";
$scope.appObj = "Objs";
$scope.showAppEditWindow = function () {
//Binding the directive isolate scope objects with parent scope objects
$scope.asAppObj = $scope.appObj;
$scope.asAppSubs = $scope.appSubscriptions;
};
});
angular.module('ctrl').directive('tempDirective', function () {
return {
restrict: 'E',
replace: true,
scope: {
appObj: '=asAppObj',
appSubs: '=asAppSubs'
},
link: function (scope, element, attrs) {
},
controller: function ($scope, $timeout) {
$scope.$watch("appSubs",function(newValue,OldValue,scope){
if (newValue){
alert(JSON.stringify(newValue));
}
});
},
template: "<div>{{appSubs}}</div>"
};
});
DEMO
通过使用 $watch,您无需在这种情况下广播您的事件。
关于AngularJS : Directive not able to access isolate scope objects,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19153430/