[英]AngularJS : Directive not able to access isolate scope objects
I am trying to put some default values in my directive with Isolate scope. 我试图在我的指令中使用Isolate范围设置一些默认值。 Basically, I need to do some DOM manipulations using the scope object when my directive is bound. 基本上,我需要在绑定指令时使用scope对象进行一些DOM操作。 Below is my code: 以下是我的代码:
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', "");
};
Service: 服务:
angular.module('Services').factory('CommonSerivce', function ($rootScope) {
return {
broadcastFunction: function(listener, args) {
$rootScope.$broadcast(listener, args);
}
};
Directive: 指示:
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"
};
});
Custom Directive element: 自定义指令元素:
<temp-directive as-app-obj="asAppObj" as-app-subs="asAppSubs" />
Now, the issue is that while trying to access the isolate scope in the default method inside directive, I aam getting an undefined value whereas the data is coming and is getting bound to the DOM. 现在,问题是在尝试访问默认方法inside指令中的隔离范围时,我得到一个未定义的值,而数据即将到来并且正在绑定到DOM。 How can I access the isolate scope in the broadcast listener and modify the directive template HTML? 如何访问广播监听器中的隔离范围并修改指令模板HTML? Is there another wasy for handling this? 还有另外一个处理这个问题吗?
The problem is: at that time angular does not update its bindings yet. 问题是:当时angular 还没有更新它的绑定 。
You should not access your variables like this, try to use angular js binding mechanism to bind it to view (by using $watch for example). 你不应该像这样访问你的变量,尝试使用angular js绑定机制将它绑定到视图 (例如使用$ watch)。 Binding to parent scope variables means you're passive , just listen for changes and update other variables or your view . 绑定到父范围变量意味着您是被动的 ,只是监听更改并更新其他变量或视图 。 That's how we should work with angular. 这就是我们应该如何使用角度。
If you still need to access it. 如果您仍需要访问它。 You could try a workaround using $ timeout 您可以尝试使用$ timeout进行解决方法
$scope.setDefaults = function() {
$timeout(function () {
alert(JSON.stringify($scope.appSubs)); //Coming as undefined
},0);
};
It's better to use $watch 最好使用$ 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>"
};
});
By using $watch, you don't need to broadcast your event in this case. 通过使用$ watch,您无需在这种情况下广播您的活动。
Most likely the isolated scope variable is not available when the directive's controller first instantiates but probably its available when you need it for a following event such as: within a function bound to an ng-click 很可能当指令的控制器首次实例化时,孤立的范围变量不可用,但是当您需要它来执行以下事件时,它可能是可用的,例如:在绑定到ng-click的函数内
its just a race condition and the object doesn't arrive exactly when directive's controller loads 它只是一个竞争条件,当指令的控制器加载时,对象不会完全到达
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.