Question

我正在寻找有关如何在Angular中实现层次结构的建议，其中指令（<partition>）可以在子指令的控制器（<property-value>）上调用方法。

我在这里列举了一个详细的例子：
https://jsfiddle.net/95kjjxkh/1/

如您所见，我的代码包含一个外部指令<partition>，它在...中显示一个或多个<property-value>指令。

<property-value>指令提供了一种编辑方法editItem()，允许用户更改单个条目的值。（为了让我的例子简短，我只是在这里指定一个随机数，但在我的生产应用程序中，会出现一个模态，以查询用户的新值。）

这很好用。但是，在外部指令<partition>中，我想添加创建新的空<property-value>指令的功能，然后立即调用其编辑方法，以便用户可以输入初始值。如果未输入初始值，则将丢弃新项目。

我已经看到了内部指令调用封闭指令的方法的例子，但不是相反。

有办法做到这一点吗？或者，有没有更好的方法来构建这种视图？

Answer 1

你总是可以使用$ broadcast来双向交谈。给你的父母以及你的孩子。

Answer 2

在您的儿童控制器中，您可以执行以下操作

  app.directive('propertyValue', function() {
return {
    require : '^partition'
    restrict: 'E',
    scope: {
        item: '='
    },

有了这个，你将获得子指令的链接函数中的父控制器，如下所示

link:function(scope,element,attrs,partitionCtrl){
  partitionCtrl.getChildCtrl(element)
  }

在分区控制器中创建getChildCtrl函数并使用该调用“propertyvalue”控制器函数

 controller: function ($scope, ItemFactory) {
 // your code
var propValueCtrl =undefined;
 this.getChildCtrl =function(elem)
 {
   propValueCtrl = elem.controller();
 }
 this.callChildFunction = function()
 {
    propValueCtrl.Edit();// whatever is the name of function
 }

在属性链接功能需要时调用此函数。

希望这有帮助。

Answer 3

您可以使用$rootScope.$broadcast();来执行此操作试试控制器和指令的代码：

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

app.directive("addCheckbox", function() {
      return {
            "restrict": "E",
            "replace": true,
            "scope": true,
            "template": '<div><div class="checkContainer"><input type="checkbox" ng-model="checkboxChecked"></div><div>{{!!checkboxChecked}}</div></div>',
            "link": function($scope, $elem, attrs) {
                   $elem.bind("click", function() {
                         $scope.checkboxChecked = !$scope.checkboxChecked;
               })

         $scope.$on("changeCheckbox", function(event, args) {
           $scope.checkboxChecked = !$scope.checkboxChecked;
         })
        } 
    }
})

app.controller("myController", function($scope, $rootScope) {
    $scope.changeCheckbox = function() {
        $scope.checkboxChecked = !$scope.checkboxChecked;
        $rootScope.$broadcast('changeCheckbox', {});

    }
})

Working Fiddle Demo

在子指令上调用方法的Angular指令

3 个答案: