9

Isolate スコープを使用してディレクティブにデフォルト値を設定しようとしています。基本的に、ディレクティブがバインドされているときに、スコープ オブジェクトを使用していくつかの 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" />

ここでの問題は、ディレクティブ内のデフォルト メソッドで Isolate スコープにアクセスしようとしているときに、データが来て DOM にバインドされているのに、未定義の値を取得していることです。ブロードキャスト リスナーで Isolate スコープにアクセスし、ディレクティブ テンプレート HTML を変更するにはどうすればよいですか? これを処理するための別のワシはありますか？

4

2 に答える 2

18

問題は、その時点で angularがまだバインディングを更新していないことです。

このように変数にアクセスするべきではありません。angular js バインディング メカニズムを使用してビューにバインドしてみてください(たとえば、$watch を使用して)。親スコープ変数にバインドするということは、受動的であることを意味し、変更をリッスンし、他の変数またはビューを更新するだけです。これが、角度を使用する方法です。

それでもアクセスする必要がある場合。$ timeoutを使用して回避策を試すことができます

$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 を使用すると、この場合、イベントをブロードキャストする必要がなくなります。

于 2013-10-05T05:35:45.667 に答える