【问题标题】:Send Object From Directive to Parent Controller in AngularJS在AngularJS中将对象从指令发送到父控制器
【发布时间】:2014-07-08 14:37:02
【问题描述】:

如何将对象从指令发送回父控制器?

我定义了以下指令:

app.directive('inspectorSharedObjects', function () {
  return {
    restrict: 'E',
    scope: {
      filterText: '=filter',
      type: '=',
      selectObject: '&onSelect'
    },
    controller: function ($scope) {
      $scope.dot = function (tags) {
        return "label-dot-" + tags[0];
      }
    },
    link: function (scope, element, attrs) {

    },
    templateUrl: 'partials/InspectorSharedObjectListPartial.html'
  };
});

...我这样称呼它:

<inspector-shared-objects ng-repeat="group in modelSharedObjects" type="group" filter="filterText" on-select="selectObject(obj)"></inspector-shared-objects>

... 使用以下模板:

<div class="object-group-header" ng-click="isActive = !isActive" ng-class="{active : isActive}">
  <span>{{ type.name }}</span>
  <span ng-if="filterText">({{ filteredList.length }})</span>
  <i class="fa fa-plus-circle"></i>
</div>
<div class="object-group-list" ng-show="isActive">
  <ul>
    <li ng-repeat="obj in filteredList = (type.contents | filter:filterText | orderBy:'name')" ng-class="dot(obj.tags)" ng-click="selectObject(obj)">{{ obj.name }}</li>
  </ul>
</div>

列表中li 上的ng-click 应将选定的obj 发送回父控制器。上面的代码调用了父控制器的函数,但我试图传递的对象是undefined

我通读了以下问题:calling method of parent controller from a directive in AngularJS - 我认为它正在尝试做同样的事情,但我看不出我在做什么与答案(或我对它的解释)不同。

如何将来自指令模板的obj 传递回父控制器?

更新:这是一个 JSFiddle:http://jsfiddle.net/EvilClosetMonkey/7GMEG/

当您单击项目符号值时,控制台应该吐出对象。

【问题讨论】:

  • @Mosho,添加了小提琴。

标签: javascript angularjs angularjs-directive angularjs-scope angularjs-controller


【解决方案1】:

将绑定类型从单向更改为双向(在隔离范围属性对象中将&amp; 更改为=)。

FIDDLE

当您使用= 时,对象(此处的函数)是通过引用传递的,因此您只需通过名称传递它(而不是像以前那样作为函数调用)。然后你可以调用它,一切都很好。

但是当您使用&amp; 时,Angular 所做的是将您发送的内容包装在eval 中并返回一个包装它的函数。因此,您在 li 元素的每次重复中调用的函数将是这样的:

function(obj){
   return $eval('selectObject("whatever")) 
}

这就是为什么你会得到“任何”记录,无论你传递什么obj


注意:由于您使用嵌套的ngRepeat,每个li 元素是控制器作用域下的2 个子作用域。因此,调用 $parent.$parent.selectObject(obj) 也可以。你不应该这样做,它与你的问题并不真正相关,只是一个友好的提醒,因为这种事情在有角度的 SO 问题上被提出了很多。

【讨论】:

  • 非常感谢您提供的解决方案和额外信息,它绝对帮助我了解了我对 &amp;= 的不理解之处。 +2,如果我有额外的! :)
【解决方案2】:

您可以传递从 ng-repeat 获得的“组”的值。

<inspector-shared-objects ng-repeat="group in modelSharedObjects" type="group" filter="filterText" on-select="selectObject(group)"></inspector-shared-objects>

【讨论】:

  • 返回“Category 1”、“Category 2”等...而不是用户点击的特定元素。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2016-01-17
  • 2013-03-15
  • 1970-01-01
  • 2018-01-03
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多