Как я могу изменить массив в директиве, а затем отразить это изменение в моем контроллере?

Question

Я сделал директиву с изолированной областью с помощью метода «=», в этой директиве я передаю пустой массив, затем я нажимаю данные на этом массиве .... Как это изменение может быть отражено на исходном массиве в моем контроллере?

Вот пример:

angular.module('myModule').controller('MyController', ['$scope', function($scope) { 

     $scope.test = []; 

    }]); 

angular.module('myModule').directive('mydirective', function() { 

    return { 
     scope: { 
      test: "=", 
      bread: "=" 
     }, 
     restrict: 'E', 
     link: function(scope, element, attribute) { 

      scope.test.push('one more') 

     }, 
     replace: true, 
     templateUrl: 'some template' 
    }; 
}); 

HTML

<div ng-controller='MyController'> 
    <mydirective test='test'></mydirective> 

    <div ng-bind='test'> </div> 

    </div> 

Когда я нажать что-то на массив я не имею отражение того, что в моем контроллере. Как я могу это исправить?

Answer 1

Вот как это сделать, чего вы пытаетесь достичь.

HTML

<!-- myCtrl contains the original array, which we push here to the scope as 'ctrl' --> 
<div ng-controller='myCtrl as ctrl'> 
    <!-- we pass your directive 'ctrl.test', which tells angular to two-way bind to the 
     test property on the 'ctrl' object on the current scope --> 
    <mydirective test='ctrl.test'> 
    <!-- we're inside the isolate scope: test here refers to mydirective's idea of test, 
     which is the two-way bound array --> 
    <div ng-bind='test'></div> 
    </mydirective> 
</div> 

JS

angular.module('app', []) 
    .directive('mydirective', function() { 
    scope: { 
     test: '=' 
    }, 
    link: function($scope) { 
     $scope.test.push('one more'); 
    } 
    }) 
    .controller('myCtrl', function() { 
    this.test = []; 
    }); 

Любые изменения в массив теперь будут отражены в ng-bind. Обратите внимание, что неправильная практика размещения примитивов на $scope без участия в объекте (из-за механики прототипического наследования), поэтому вы хотите изменить $scope.test на что-то другое.