AngularJS：指令無法訪問隔離範圍對象

我想在隔離範圍的指令中加入一些默認值。基本上，當我的指令被綁定時，我需要使用scope對象做一些DOM操作。下面是我的代碼：AngularJS：指令無法訪問隔離範圍對象

控制器：

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" />

現在，問題是，在試圖訪問內部指令的默認方法的分離範圍，我AAM得到一個未定義的值，而數據即將到來，越來越被綁定到DOM。如何訪問廣播監聽器中的隔離範圍並修改指令模板HTML？處理這個問題還有另一個問題嗎？

來源

2013-10-03 Akhilesh Aggarwal

你能創建一個小提琴並不完全到達？ – AlwaysALearner

的問題是：當時的角度不更新其綁定尚未。

你不應該像這樣訪問你的變量，嘗試（通過使用$手錶爲例）使用角度JS綁定機制，將其綁定到視圖。綁定到父作用域變量意味着你被動，只聽更改和更新其他變量或視圖。這就是我們應該如何使用角度。

如果您仍然需要訪問它。你可以使用$ timeout

$scope.setDefaults = function() { $timeout(function() { alert(JSON.stringify($scope.appSubs)); //Coming as undefined },0); };

DEMO

這是更好地使用$看

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

通過使用$腕錶嘗試一種解決方法，你不需要廣播你的事件在這種情況下。

來源

2013-10-05 05:35:45

@Akhilesh Aggarwal：你應該爲此使用$ watch。看看在http://stackoverflow.com/questions/19142409/angular-directives-and-scope/19204970#19204970 –

@Khank遇到同樣的問題：這是更好:)。'watch'定義應該添加到'link'中的任何特殊原因。我測試過，它也在'控制器'下工作。 –

@Akhilesh Aggarwal：就你而言，我認爲你應該在'controller'中使用$ watch。由於控制器應該包含您的邏輯和鏈接功能，只應該關心在模型和視圖之間進行動態連接 –

最有可能的隔離範圍變量不可用時，該指令的控制器首先實例，但可能其可用的，當你需要它的一個下面的事件，如：綁定到一個函數中NG單擊

它只是一個競爭條件和對象時，指令的控制器負載

來源

2015-06-16 18:03:04

AngularJS：指令無法訪問隔離範圍對象

回答

相關問題