javascript - Angular Directive未运行且templateUrl未显示

找不到为什么该指令未运行的原因。
没有任何类型的错误，没有调用链接函数并且没有呈现模板。

原始代码在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;

      }
    };
  });

的HTML

<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：尝试制作自定义的多选控件。

最佳答案

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

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

无论如何，默认的restrict是“ EA”，并且您不需要将attrs.text绑定到$scope，因为它已经绑定在隔离范围中。

关于javascript - Angular Directive未运行且templateUrl未显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34646123/