AngularJS 指令：具有命名控制器的范围

Question

我有下面的例子。

HTML:

<body ng-controller="MainCtrl as MgtCtrl">
    <p>Hello {{MgtCtrl.name}}!</p>
    <p>Result is {{MgtCtrl.result}}!</p>
    <output-content data="MgtCtrl.name" result="MgtCtrl.result"></output-content>
</body>

JavaScript:

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

app.controller('MainCtrl', function($scope) {

  var MgtCtrl = this;

  MgtCtrl.name = 'World';
  MgtCtrl.result = "no";

  MgtCtrl.changeLabel = function() {
    alert('changeLabel');
    MgtCtrl.result = 'yes';
  }
});

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    scope: {
      data: '=',
      changeLabel: '&',
      result: '='
    },
    controller: 'MainCtrl',
    controllerAs: 'MgtCtrl'
  };

});

ouputContent.html:

<div>
  {{data}}
  <button ng-click="MgtCtrl.changeLabel()">Change</button>
</div>

Plunker 是：http://plnkr.co/edit/BW8VDyCaRnRgxE8I9JJy

我希望单击 'Change' 按钮时的结果是 'yes'。

由于命名控制器，它不起作用。

你能解释一下如何编写指令吗？

此致。

Answer 1

您从未将作用域变量绑定到指令中的命名控制器。

您必须将属性 bindToController: true 添加到指令定义中，如下所示：

http://plnkr.co/edit/2QdnkpeuTM6adG9KoyJT?p=preview

指令代码：

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    scope: {
      data: '=',
      changeLabel: '&',
      result: '='
    },
    controller: 'MainCtrl',
    controllerAs: 'MgtCtrl',
    bindToController: true
  };

});

这会将数据和结果绑定添加到相应的指令控制器。

Answer 2

我认为在这种情况下您不需要在指令中指定控制器。

app.directive('outputContent', function() {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    scope: {
      data: '=',
      changeLabel: '&',
      result: '='
    }
  };

});

另外html应该更新：

<body ng-controller="MainCtrl as MgtCtrl">
    <p>Hello {{MgtCtrl.name}}!</p>
    <p>Result is {{MgtCtrl.result}}!</p>
    <output-content data="MgtCtrl.name" result="MgtCtrl.result" change-label="MgtCtrl.changeLabel()"></output-content>
  </body>

AngularJS 指令：具有命名控制器的范围

AngularJS directive: scope with named controller

controller

directive

angularjs