角指令没有运行，templateUrl也没有显示

Question

找不到为什么这个指令不运行。没有任何类型的错误，没有调用链接函数，也没有呈现模板。

原始代码在TypeScript上，但我在plnkr中复制了完全相同的行为，试图解决这个问题，但仍然如此。

Plnkr版本：http://plnkr.co/edit/vBARsB9PhZ4txjlmolMM?p=preview

JS

angular.module('DirectivesApp', [])
  .controller('MainCtrl', ['$scope', function($scope) {
    $scope.text = 'find this, also this';
    $scope.Items = [{
      Key: 'find this',
      Value: 'FOUND 1'
    }, {
      Key: 'also this',
      Value: 'FOUND 2'
    }];

  }]).directive('multiSelect', function() {
    return {
      templateUrl: 'multipleSelect-template.html',
      $scope: {
        text: '@text',
        Items: '&Items'
      },
      restrict: 'A',

      link: function($scope, element, attrs) {
        $scope.text = attrs.text;

      }
    };
  });

<div ng-app="DirectivesApp">
    <div ng-controller="MainCtrl">
      <multi-select text="{{text}}" Items="{{Items}}"></multi-select>
    </div>
  </div>

模板

<input type="text" disabled value="{{text}}" />
<input type="checkbox" ng-repeat="item in Items" value="{{item.Key}}"/><label>{{item.Value}}</label>

PS:尝试创建一个自定义的多选择控件。

Answer 1

要总结上面所有的评论，这应该是您所需要的。

return {
    templateUrl: 'multipleSelect-template.html',
    scope: {
        text: '@',
        Items: '='
    }
};

默认的restrict是"EA“，您不需要将attrs.text绑定到$scope，因为它已经绑定到了隔离作用域中。