Обновите данные в контроллере, когда область изменений изменится в AngularJS

Question

Я довольно новый с угловым, и я прочитал много потоков здесь и искал эту тему, но я не могу получить четкий ответ. чего я действительно пытаюсь достичь. давайте предположим, что у меня есть контроллер A, это фактический источник данных. Я передал его в одну директиву, привязывая его к HTML. Из этой директивы я получаю источник на другом контроллере. Поэтому мне нужно выяснить, как я могу изменить данные контроллера, когда данные контроллера 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 получает изменения на контроллере, то

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

также должны переодеться

я не знаю, если это возможно или нет. Но мне нужно изменить данные Спасибо заранее

Answer 1

удалить фигурные скобки в variable.since это директива не нужно добавлять фигурные скобки

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

если и хотят, чтобы получить значение из переменная затем использовать «=», если и использовать «&» это будет только получить строку

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

также впрыскивать модуль директивы ур углового модуля

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

Answer 2

Простое объяснение, касающееся различных типов областей, будет ниже.

@ Атрибут строка связывания (String)

= Двухсторонняя модель связывания (модель)

& метод обратного вызова связывания (метод)

Согласно этим вы должны использовать Двухсторонний связывания вместо привязки строки атрибута, потому что модель в родительской области связана с моделью в изолированной области действия директивы. Изменения одной модели влияют на другую, и наоборот.

Я бы предпочел использовать bindToController определение свойства в директиве.Если в директиве с изолированной областью, которая использует controllerAs, установлено значение true, свойства компонента привязаны к контроллеру, а не к области. Это означает, что Angular гарантирует, что при создании экземпляра контроллера на нем будут доступны начальные значения изолированных привязок областей, и будущие изменения также будут автоматически доступны.

Проверьте Ниже пример образца скрипку для большего понимания

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