Question

我无法获得ng-if来评估指令内部。我第一次调用返回布尔值的方法，但无论结果如何，ng-if都没有得到结果，它总是计算为false。

为了尝试并指出问题，我尝试了一个简单的内联表达式（下面），但即使这样也总是评估为false。当我删除ng-if时，div显示。我做错了什么？

.directive('handsUpVideoOverlay', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: false,
    template: '<div class="handsOffOverlay" ng-if="1>0">' +
    '</div>',
    link: function($scope) {

    }
  };
})

更新

此代码完美地作为独立的Jsfiddle。看起来这个问题与我将此指令添加为另一个指令的子节点的事实有关。父指令是第三方，并且手动转义它的子女。

更新

好的，我有这个工作。问题是父指令正在删除任何子指令，然后将其添加回来而不编译它们。我不得不拿自己的第三方父指令副本并在链接函数中更改它：

// Make transcluding work manually by putting the children back in there
      ng.element(element).append(oldChildren);

到此：

// Make transcluding work manually by putting the children back in there
  for(var i = 0; i < oldChildren.length; i++) {
      var template = oldChildren[i].outerHTML;
      var linkFn = $compile(template);
      var content = linkFn($scope);

      $element.append(content);
   }

Answer 1

<强> UPD：

由于问题导致指令中的指令，并且没有$ compile，angular将不知道ng-if指令。在链接函数中，构建元素以使模板变得简单。

OLD ANSWER （可以忽略）

你的指令没有结束，或者你没有发布整个代码块。这项工作符合预期。

var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
  $scope.test = 111;
});
app.directive('handsUpVideoOverlay', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: false,
    template: `<div class="handsOffOverlay" ng-if="1>0">Test Directive</div>`,
    link: function($scope) {

    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <hands-up-video-overlay></hands-up-video-overlay>
</div>

Answer 2

解决，请检查Jsfiddle link

Js代码

  app.directive('handsUpVideoOverlay', function() {
    return {
      restrict: 'E',
      replace: true,
      scope: false,
      template: '<div class="handsOffOverlay" ng-if="1>0">lol' +
        '</div>',
      link: function($scope) {

      }
    };
  });

<强> HTML

<hands-up-video-overlay></hands-up-video-overlay>

希望这会对你有所帮助

ng-if如果不评估内部指令

2 个答案: