Question

在我的应用程序中，在某个视图下，我创建了两个指令，dir1来循环遍历一个对象数组，并dir2显示额外的信息，点击\选择来自{{1}的内容所以这基本上意味着它们都处于同一水平。 dir1从视图控制器获取数组并呈现数据。 dir1假设从dir2获取数据，而我并不确定这是实现此目标的最佳方法。有几种可能性：
1.选择dir1时使用dir1或emit服务（通过broadcast？）。 2.使用服务 3.需要父控制器（主视图），从$rootScope更新它，并以某种方式将对象传递给dir1。

我尝试使用名为dir2的{{1}}服务，但我无法触发factory中的更改，因此我不确定这是一个不错的解决方案。

这是主视图的结构：

serv

dir2代码：

<div id="container">
    <div class="parent">
        <dir1 character="person" ng-repeat="person in obj"></dir1>
    </div>
    <dir2></dir2>
</div>

dir1代码：

angular.module("app").directive("dir1", function (serv) {
    return {
        restrict: "E",
        templateUrl: "dirs/parent.html",
        scope:{
            character: "="
        },
        controller: function ($scope) {
        },
        link: function (scope,elem, attrs) {
            scope.getData = function (data) {
                // console.log(data);
                serv.setChar(data);
            }
        }
    }
});

dir2服务代码：

angular.module("app").directive("dir2", function (serv) {
    return {
        restrict: "E",
        templateUrl:"dirs/child.html",
        scope:{
            obj: "="
        },
        controller: function () {
            console.log("child ctrl")
        },
        link: function (scope, elem, attrs) {
            scope.obj = serv.char;
        }
    }
});

编辑：我忘了添加serv模板：

angular.module("app").factory("serv", [function () {
    var self = this;
    var char = {};

    return {
        setChar: function (character) {
            console.log("char set to: " + character);
            self.char = character;
        },
        getChar: function () {
            console.log("returned char: " + self.char);
            return self.char;
        }
    }
}]);<br>

EDIT2： dir模板：

<p ng-click="getData(character)">
    {{character.name}}
</p>

Answer 1

我为使用指令做了新答案。

console.log内的getChar永远不会执行，因为您从不致电getChar。哪个好。而是在第二个指令中将scope.obj设置为serv.char。问题是，在您工厂中，您不会返回此char属性。您只需返回setChar和getChar个功能。

所以要么从你的工厂返回char（但这不是很好，因为你直接访问变量，我想你不想），或者link函数dir2您创建了一个观察者，如下所示。

  scope.$watch(serv.getChar, function(newValue) {
    scope.obj = newValue;
  });

因此obj的{{1}}属性会在每次更改时与当前人员进行更新。

Answer 2

（在你最近的评论中，我明白学习指令比实际用例更多，我道歉）

您的HTML

<div id="container">
    <div class="parent">
        <div ng-click="selectPerson(person)" ng-repeat="person in obj"></div>
    </div>
    <div ng-if="selectedPerson != null">
    <!-- display whatever you want about the selected person --> 
    </div>
</div>

在主控制器内

$scope.obj = []; /* this is your existing array of people */
$scope.selectedPerson = null;
$scope.selectPerson = function(person) {
  $scope.selectedPerson = person;
}

Answer 3

下面是一个示例，说明如何扩展当前代码以共享数据，而无需进行额外的服务调用，也无需添加$ watch（这在性能上是昂贵的）。这是我创建的一个示例pen。

angular
  .module("app")
  .directive("dir2", function() {
    return {
      restrict: "E",
      templateUrl: "dirs/child.html",
      scope: {
        obj: "="
      },
      controller: function() {
        console.log("child ctrl");
      },
      link: function(scope, elem, attrs) {
        //you should have the right data obj here
        // without having to make service call again or put a $watch.
        console.log(scope.obj);
      }
    };
  });

<div id="container">
  <div class="parent">
    <dir1 character="person" ng-repeat="person in obj"></dir1>
  </div>
  <dir2 obj="obj"></dir2>
</div>

Angular：无法在两个兄弟指令之间共享对象

3 个答案: