AngularJS - 将两个指令绑定/链接在一起

Question

将两个指令链接/绑定在一起的首选方法是什么？ 我有一个有两个指令的控制器，第一个指令是一个选择元素，选择选项后，第二个指令应该处理选定的项目值。

应用代码：

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

app.controller('MainCtrl', function() {
  var sharedData = { selectedId: '' };

  var vm = this;

  vm.sharedData = sharedData;
});

app.directive('directiveA', ['$compile', function($compile) {
  return {
    restrict: 'E',
    scope: {
      selectedId: '='
    },
    template: '<select data-ng-model="vm.sharedData.selectedId" data-ng-options="currentSelect.Id as currentSelect.Name for currentSelect in vm.sharedData.availableSelects track by currentSelect.Id"><option value="">Select option</option></select><p>Directive A, selected ID: {{vm.sharedData.selectedId}}</p>',
    bindToController: true,
    controllerAs: 'vm',
    controller: function() {
      vm = this;

      vm.sharedData = {
        availableSelects: [
          {Id:1, Name: 'Option 1'},
          {Id:2, Name: 'Option 2'},
          {Id:3, Name: 'Option 3'},
          {Id:4, Name: 'Option 4'}
        ]
      }
      vm.logMessage = logMessage;

      function logMessage(selectedId) {
        console.log('directiveA: ' + selectedId);
      }
    },
    link: function($scope, elem, attr, ctrl) {
      attr.$observe('selectedId', function(selectedId) {
        ctrl.logMessage(selectedId);
      });
    }
  };
}]);

app.directive('directiveB', ['$compile', function($compile) {
  return {
    restrict: 'E',
    scope: {
      selectedId: '='
    },
    template: '<p>Directive B, selected ID: {{vm.sharedData.selectedId}}</p>',
    bindToController: true,
    controllerAs: 'vm',
    controller: function() {
      vm = this;

      vm.logMessage = logMessage;

      function logMessage(selectedId) {
        console.log('directiveB: ' + selectedId);
      }
    },
    link: function($scope, elem, attr, ctrl) {
      attr.$observe('selectedId', function(selectedId) {
        ctrl.logMessage(selectedId);
      });
    }
  };
}]);

HTML代码：

<!DOCTYPE html>
<html data-ng-app="plunker" data-ng-strict-di>
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as vm">
    <p>MainCtrl, selected ID: {{vm.sharedData.selectedId}}</p>
    <directive-a data-selected-id="vm.sharedData.selectedId"></directive-a>
    <directive-b data-selected-id="vm.sharedData.selectedId"></directive-b>
  </body>

</html>

这是一个Plunker示例：

http://plnkr.co/edit/KVMGb8uAjUwD9eOsv72z?p=preview

我做错了什么？

此致，

Answer 1

关键问题围绕着您对隔离作用域的使用：

scope: {
  selectedId: '='
},

使用 controllerAs 绑定：

controllerAs: 'vm',

基本上，这基本上是将视图模型放在指令范围内，通过您在 controllerAs 中分配的别名进行访问。 所以基本上在你去的时候在你的 html 中：

<directive-a data-selected-id="vm.sharedData.selectedId"></directive-a>

您实际上正在访问指令 - 视图模型，而不是 MainCtrl 视图模型。 因为您将指令-a 设置为具有隔离范围......这是一个新的范围，与 MainCtrl 隔离。

您需要做的更多是以下几行：

http://plnkr.co/edit/wU709MPdqn5m2fF8gX23?p=preview

编辑

TLDR：我建议在使用隔离范围时使用唯一的视图模型别名 (controllerAs)，以正确反映它们不是同一个视图模型的事实。

AngularJS - 将两个指令绑定/链接在一起

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-06-23 03:17:38

AngularJS - 将两个指令绑定/链接在一起

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-06-23 03:17:38

解决方案1
1 已采纳 2015-06-23 03:17:38