AngularJS：ディレクティブが分離スコープオブジェクトにアクセスできない

Question

ディレクティブにいくつかのデフォルト値を配置しようとしています。基本的には、私のディレクティブがバインドされているときにスコープオブジェクトを使って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を変更するにはどうすればよいですか？これを処理するもう一つのうぬぼれがありますか？

Answer 1

問題は次のとおりです。その時の角度はバインディングを更新しませんまだありません。

あなたはこのようなあなたの変数にアクセスするべきではありません、（例えば$ウォッチを使用して）ビューにバインドするメカニズムを結合角度のJSを使用してみてください。親スコープ変数にバインドすると、あなただけの変化を聞くと他の変数またはビューを更新し、の受動ていることを意味します。そういうわけで、私たちは角度をもって仕事をするべきです。

まだアクセスする必要がある場合。あなたは

DEMO

$ timeout

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

を使用して回避策を試みることができるそれは、$ $の時計を使用することにより

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

を見て使用することをお勧めします、あなたはブロードキャストする必要はありません。あなたのイベントはこの場合です。バインドされた関数内で

そのわずかNGクリック：あなたは次のイベントのためにそれを必要とするときディレクティブのコントローラー最初のインスタンス化が、おそらくその利用可能などの際に

Answer 2

は、ほとんどの孤立スコープ変数は使用できません。競合状態であり、ディレクティブのコントローラがロードされたときにオブジェクトが正確に届かない