角度指令 - 双向数据绑定问题答案

【问题标题】：angular directive - two way data binding issue角度指令 - 双向数据绑定问题
【发布时间】：2016-10-17 11:45:33
【问题描述】：

我正在学习创建自定义角度指令，我想在其中使用一些双向数据绑定；但是没有运气。

想法非常简单：我们有一个人员列表，一旦我选择其中任何一个，我想在我的指令中显示所选人员的姓名（详细信息）。

在我粘贴大量代码之前，这是我的示例 plunker：
https://plnkr.co/edit/xQJAWcYcscOaaNs8VlAI?p=preview

这是我所做的：
创建主控制器：

(function() {
"use strict";
var controllerId = 'personController';
angular.module("app").controller(controllerId, ["$timeout", personController]);

function personController($timeout) {
    var vm = this;
    vm.name = "Janko";
    vm.people = returnPeople();
    vm.selectedPerson = {};
    vm.selectPerson = function (person) {
        //function to add a new Person
        vm.selectedPerson = person;
        console.log(vm.selectedPerson.name);
    };
}

function returnPeople() {
    return [
        {
            name: "Janko",
            surname: "Hrasko",
            age: 24,
            gender: "M"
        },
        {
            name: "Jozef",
            surname: "Mrkvicka",
            age: 26,
            gender: "M"
        },
        {
            name: "Janka",
            surname: "Kratka",
            age: 21,
            gender: "F"
        }
    ];
};
})();

已创建指令：

(function () {
"use strict";

var app = angular.module("app");

app.directive('personDetail', personDetail);
function personDetail() {
    return {
        scope: {
            person: "=person"
        },
        restrict: 'E',
        templateUrl: '/js/person/templates/personDetail.html'
    }
};
})();

**创建的人物细节控制器：**

(function() {
"use strict";

var controllerId = 'personDetail';
angular.module("app").controller(controllerId, ["$scope", personController]);

function personController($scope) {
    var vm = this;
    vm.person = $scope.person;
}
})();

最后 - person Detail.html

<div ng-controller="personDetail as vm">
  <h3>Selected Name:</h3>
  <h3>{{vm.person.name}}</h3>
</div>

不幸的是，数据绑定不起作用，即使我可以看到该项目已被选中。我在这里做错了什么？

编辑：
您的所有答案都已从我的personDetail.html 中删除了 ng-controller，但我想保留它（目前它只包含一个小绑定，但我想在那里添加更多功能，例如按钮点击等）。

是否可以保留控制器？

【问题讨论】：

标签： angularjs data-binding angular-directive

【解决方案1】：

标记：<person-detail person="vm.selectedPerson"></person-detail>

function personDetailsController($scope) {
  var vm = this;
  //vm.person = $scope.person;// This will get executed only first time.
  //Every time you assigning different object to it. Not changing object.property
}

您可以使用控制器作为语法如下，它也保留了双向绑定。

 function personDetail() {
   return {
      scope: {
         person: "="
      },
      bindToController: true,
      controller:'personDetailsController',
      controllerAs: 'vm',
      restrict: 'E',
      templateUrl: 'personDetail.html'
    }
 };

Demo

【讨论】：

【解决方案2】：

您需要将所选人员传递给指令。您已经在指令中公开了“人”变量，您需要将选定的人传递给指令。而且你不需要控制器的控制器。

像这样改变你的指令声明：

<person-detail person="vm.selectedPerson"></person-detail>

已编辑

同时删除指令中的控制器，不需要额外的控制器。

<div>
  <h3>Selected Name:</h3>
  <h3>{{person.name}}</h3>
</div>

我创建了一个 plunkr 来演示解决方案。你可以看到它here。

【讨论】：

除了person=vm.selectedPerson，您是否更改了其他任何内容？我试图在我的本地解决方案中实现它，但它仍然无法正常工作......但 Plunk（1-1 副本）正在工作:)
是的，我已经删除了您在指令中使用的额外控制器。你可以查看我分享的 plunkr。
@RobertJ。有帮助吗？

【解决方案3】：

你快到了。我更新了你的plunkr
在 index.html 中，您必须指定要绑定的对象，如下所示：

<person-detail person="vm.selectedPerson"></person-detail>

不需要 personDetail.js 文件。在 personDetail.html 中，您必须将 vm.person.name 替换为 person.name。顺便说一句，从 angular 1.5 开始，您就可以使用angular-components，这更容易使用。

【讨论】：

【解决方案4】：

您在directive 中绑定的person 应该是您未指定的元素中的一个属性。所以将其传递为：

<person-detail person="vm.selectedPerson"></person-detail>

并在指令模板中删除ng-controller="personDetail as vm" 的提及，将其用作：

<div>
  <h3>Selected Name:</h3>
  <h3>{{person.name}}</h3>
</div>

【讨论】：