使用数组推送将变量传递给指令

时间:2015-02-02 16:43:03

标签: arrays angularjs angularjs-directive angularjs-scope

我的控制器包含一个数组。数组中的每个项都是带模板的指令。当我推新一个指令时如何获得指令的价值?我想在推送新项目时将ID发送到指令。

控制器

(function () {
  'use strict';

angular
  .module('app')
  .controller('dashboardController', dashboardController);

dashboardController.$inject = ['$scope', '$timeout', '$state', 'apiService'];

function dashboardController($scope, $timeout, $state, apiService) {

$scope.newCMP = newCMP;
$scope.openCMPArray = [];

function newCMP() {
  $scope.openCMPArray.push({id:"3"});
}


}

})();

指令

(function () {
  'use strict';

  angular
      .module('app')
      .directive('gpCmpForm', cmpForm);

  function cmpForm() {
    return {
      scope: {
        id: '=id' //I've tried doing a lot of different mapping here
      },
       restrict: 'A',
      templateUrl: '/app/views/cmpForm.html',
      controller: function ($scope) {
        $scope.test = "342";
      }
    }
 };
})();

指令在创建时如何获取ID?

1 个答案:

答案 0 :(得分:2)

如果循环遍历为其生成指令的集合,则只需将新元素推入集合中,AngularJS将获取更改并处理视图。

例如,如果这是你的HTML:

<div ng-controller="mycontroller">
    <a href="#" ng-click="addPerson()">click to add person</a>
    <div ng-repeat="person in people">
        <div persondirective person="person"></div>
    </div>
</div>

您会看到为集合中的每个人创建了一个persondirective。如果您将某人推入人员集合,则会为该人员显示新指令:

$scope.addPerson = function() {
    $scope.people.push({ name: 'new guy' });
};

我为你创造了一个小提琴来演示它的工作原理:http://jsfiddle.net/k7qsxo5e/

另外 - 您可能想要使用&#39; =&#39;捆绑。这是一种双向约束。这意味着如果指令中显示的人员从控制器更改,则列表将更新。此外,如果指令更改了人,则控制器中的集合将更新。