AngularJS：使用 ng-if 在指令中选择部分模板

Question

我的指令需要在其模板内的两个部分模板之间进行选择：

<div ng-if="enablerowselection" ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div>

        <div ng-if="!enablerowselection" ui-grid="gridOptions" ui-grid-pagination class="grid"></div>

在我的指令的链接器函数中，我从属性中获取 enablerowselection 的值：

function linker(scope, element, attrs) {
   scope.enablerowselection = attrs.enablerowselection; //enablerowselection is an attribute for my directive
}

但是，这会导致以下错误：

Error: [$compile:nonassign]

我想我需要编译指令内的部分模板，所以我在链接器函数中添加了以下内容，但它仍然不起作用：

$compile(element.contents())(scope);

编辑：以下是我的指令代码：

angular.module('myApp')
    .directive('myDirective', myDirective);

myDirective.$inject = ['$compile'];

function myDirective($compile) {
   return {
     restrict: 'EA',
     scope: {
        enablerowselection: '='
      },
     templateUrl: '/path/to/directive_tmpl.html',
     link: linkerFn

    };

 function linkerFn(scope, element, attrs) {
     $scope.enablerowselection = attrs.enablerowselection;
     $compile(element.contents())(scope); //does not help
  } //linkerFn
}

Answer 1

正如我看到 enablerowselection 在隔离范围内一样，您应该在指令中将该属性设为可选，这样如果未提供该属性，则指令不会引发错误。您可以通过使用 =? 来针对该变量创建该隔离范围属性，例如

scope: {
   enablerowselection: '=?'
},

如果您在指令中需要该值，则应将其作为属性添加到指令元素中

<my-directive enablerowselection="enablerowselection"></my-directive>

基本上你应该在该属性中添加范围变量，当你使用=时，这将得到两种方式绑定

链接功能

function linkerFn(scope, element, attrs) {
     //scope.enablerowselection = attrs.enablerowselection; //reomve this
     //you already have value in `$scope.enablerowselection`,
     //you don't need to get it from attribute,
     //'=' in isolated scope means value of parent scope variable specified in attribute,
     //gets available inside the isolated scope(basically its two way binded.)
     $compile(element.contents())(scope); //does not help
}