我试图在我的指令中使用隔离范围放置一些默认值。基本上,绑定指令后,我需要使用scope对象进行一些DOM操作。下面是我的代码:
控制器:
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" />
现在,问题是,当尝试在指令内部的默认方法中访问隔离范围时,我在获取数据并将其绑定到DOM的同时获得了未定义的值。如何访问广播侦听器中的隔离作用域并修改指令模板HTML?还有另一个处理这个的麻烦吗?
问题是:那时angular 尚未更新其绑定 。
您不应该这样访问变量,请尝试使用angular js绑定机制将其绑定到 视图 (例如,使用$ watch)。绑定到父作用域变量意味着您是 被动的 ,只需侦听更改并更新 其他变量 或 视图即可 。这就是我们应该使用角度的方式。
如果您仍然需要访问它。您可以使用$ 超时尝试解决方法
$scope.setDefaults = function() { $timeout(function () { alert(JSON.stringify($scope.appSubs)); //Coming as undefined },0); };
演示
最好使用$ 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>" }; });
通过使用$ watch,在这种情况下,您无需广播事件。