AngularJSでスコープが変更されたときにコントローラ内のデータを更新する

Question

私は非常に角度が新しく、ここで多くのスレッドを読んでこのトピックをGoogleで検索しましたが、明確な答えは得られません。私が実際に達成しようとしているのは、です。私はコントローラAを持っていると仮定します。これはデータの実際のソースです。私はそれをHTMLにバインドすることでそれを1つのディレクティブに渡しました。このディレクティブから、私は別のコントローラにソースを瞬時に取得しています。 コントローラAのデータが変更されたときに、コントローラのデータをどこで変更できるかを調べる必要があります。

コントローラーA

angular.module('page.leadAndOpportunity.ctrl', []).controller('LeadAndOpportunityController', ['$scope', '$rootScope', '$timeout', function ($scope, $rootScope, $timeout, leadAndOpportunityService) { 

    $scope.selectDataSource = function (condition) { 
     var dataSource = []; 
     var dataSource = $scope.leadsDataSource.filter(function (item) { 
      return item.typeName === condition; 
     }); 
     $scope.leadsDataSource = []; 
     $scope.leadsDataSource = dataSource; 
     console.log($scope.leadsDataSource); 
    } 

}]); 

HTML

<ng-senab-grid datasource="{{ leadsDataSource }}" defaultdata="{{defaultColumns}}" skipdata="{{ skipColumns }}" enablepersonalisation="true"></ng-senab-grid> 

指令

angular.module('page.gridView.drct', []).directive("ngSenabGrid", ["$rootScope", function ($rootScope) { 
     return { 
      restrict: "E", 
      templateUrl: "pages/gridView/page.gridView.tpl.html", 
      scope: { 
       enablePersonalisation: "@enablepersonalisation", 
       datasource: "@datasource", 
       defaultdata: "@defaultdata", 
       skipdata: "@skipdata" 
      }, 
     } 
    }] 
); 

コントローラーB

var _datasource = JSON.parse($scope.datasource); 
//rest the data follows 

ので$scope.leadsDataSourceがコントローラーAで変更を取得するときに、その後、

var _datasource = JSON.parse($scope.datasource); 

も

を変更を取得する必要があり、私はそれが可能であれば知りませんか否か。しかし、私は、これは指令uはの値を取得したい場合は、中括弧

<ng-senab-grid datasource="leadsDataSource" defaultdata="defaultColumns" skipdata="skipColumns" enablepersonalisation="true"></ng-senab-grid> 

を追加する必要はありませんですvariable.sinceの中括弧を削除事前

Answer 1

にデータを 感謝を変更する必要があります変数その後、uは「&」を使用する場合にのみ

角度モジュールをウルするディレクティブモジュールを注入も

scope: { 
      enablePersonalisation: "=enablepersonalisation", 
      datasource: "=datasource", 
      defaultdata: "=defaultdata", 
      skipdata: "=skipdata" 
      }, 

文字列を取得します「=」を使用

angular.module('page.leadAndOpportunity.ctrl', ['page.gridView.drct']) 

Answer 2

さまざまな種類のスコープについて覚えておくだけの簡単な説明は以下のとおりです。

@属性文字列結合（String）を

=双方向モデルバインディング（モデル）

&コールバックメソッドバインディング（メソッド）

あなたの代わりに結合双方向を使用する必要があり、これをよります親スコープ内のモデルは、ディレクティブの分離スコープ内のモデルにリンクされているため、属性文字列バインディングのあるモデルへの変更は他のモデルにも影響し、その逆もあります。

bindToControllerディレクティブのプロパティ定義を使用することをお勧めします。controllerAsを使用する独立スコープのディレクティブでtrueに設定すると、コンポーネントのプロパティはスコープではなくコントローラにバインドされます。 これは、コントローラがインスタンス化されたときに、分離されたスコープバインディングの初期値が使用可能であり、将来の変更も自動的に利用できることを意味します。

より理解

var myApp = angular.module('myApp', []); 
 

 
myApp.controller('MyController', function($scope) { 
 

 
    $scope.change = function() { 
 
    $scope.fullname = 'Keshan'; 
 
    } 
 
    $scope.reset = function() { 
 
    $scope.fullname = 'Fill Your Name'; 
 
    } 
 
}); 
 

 
myApp.directive('myDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     name: '=' 
 
    }, 
 

 
    controller: function($scope) { 
 
     this.name = 'Fill Your Name'; 
 
    }, 
 
    controllerAs: 'ctrl', 
 
    bindToController: true, 
 
    template: '{{ctrl.name}}', 
 
    }; 
 
});

<script src="https://code.angularjs.org/1.3.7/angular.js"></script> 
 
<div ng-app="myApp" ng-controller="MyController"> 
 
    <button ng-click="change()">Change</button> 
 
    <button ng-click="reset()">Reset</button> 
 
    <my-directive name="fullname"></my-directive> 
 
</div>

Further Reading