Question

我有一部分我像这样构建

<my-partial attr1="some text" attr2="some other text">
   <div ng-show="displayBool">
      <div>{{attr1}}</div>
      <div>{{attr2}}</div>
      <button ng-click="changeBool()">Change var</button>
</my-partial>

呈现

   <div>some text</div>
   <div>some other text</div>

在控制器中我设置了$scope.displayBool = true。指令看起来像这样：

angular.module('grasshopperApp')
    .directive('myPartial', function () {
        return {
            restrict: 'EA',
            scope: {
                displayBool: '=',
                attr1: '@'
                attr2: '@'
            },
            templateUrl: '../my.html'
        };
    });

displayBool在指令中没有出现并且div从未显示过，但是当我检查开发人员面板中的隐藏元素时，属性值会正确显示。为什么是这样？我怎样才能让这个价值得以实现？

Answer 1

您可以为指令指定控制器，并设置一些属性。

所以你可以这样做：

<强>指令

(function(){

  function directive() {
    return {
        restrict: 'EA',
        scope: {
            attr1: '@',
            attr2: '@'
        },
        templateUrl: 'template.html',
        //Declare controller for our custom directive
        controller: function($scope){
          //Set displayBool property
          $scope.displayBool = true;
        }
    };
  }

angular
  .module('app')
  .directive('myPartial', directive);

})();

<强>模板

<div ng-show="displayBool">
   <div>{{attr1}}</div>
   <div>{{attr2}}</div>
</div>

<强> HTML

<my-partial attr1="some text" attr2="some other text"><my-partial>

您可以看到Working Plunker

Answer 2

指令中的displayBool是一个属性，不会从你的html片段的父作用域继承。您的指令必须使用displayBool来决定是否将内容转换为您的指令。

<my-partial attr1="some text" attr2="some other text" displayBool="true"></my-partial>

如何从Directive中调用包含Controller的$ scope方法

2 个答案: