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;

      }
    };
  });

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：尝试进行自定义多选控制。

Answer 1

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

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

默认restrict是＆＃34; EA＆＃34;无论如何，您不需要将attrs.text绑定到$scope，因为它已经绑定在隔离范围内。

Angular Directive未运行且templateUrl未显示

1 个答案: