angular指令 - 雙向數據綁定問題

Question

我正在學習創建自定義角度指令，我想使用一些雙向數據綁定; 但沒有運氣。

想法非常簡單：我們有一個人員列表，一旦我選擇其中任何一個，我想在我的指令中顯示所選人員的姓名（詳細信息）。

在我粘貼大量代碼之前，這是我的示例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;
}
})();

最后 - 人Detail.html

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

不幸的是，數據綁定不起作用，即使我可以看到該項已被選中。 我在這做錯了什么？

編輯：
你的所有答案都從我的personDetail.html刪除了ng-controller，但是我想保留它（目前它只包含一個次要綁定，但我想在那里添加更多功能，如按鈕點擊等）。

是否可以保留控制器？

Answer 1

您需要將所選人員傳遞給指令。 您已在指令中公開了“person”變量，您需要將所選人員傳遞給指令。 而且您也不需要控制器的控制器。

像這樣更改你的指令聲明：

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

編輯

同時刪除指令中的控制器，不需要額外的控制器。

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

我創建了一個plunkr來演示解決方案。 你可以在這里看到它。

Answer 2

標記： <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'
    }
 };

演示

Answer 3

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

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

不需要personDetail.js文件。 在personDetail.html中，您必須將vm.person.name替換為person.name 。 順便說一下，從角度1.5開始，你可以使用更容易使用的角度組件 。

Answer 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>