ng - 如果不在内部指令中进行评估

我无法获得ng-if以在指令内进行评估。我第一次调用一个返回布尔值的方法，但无论结果是什么，ng-if都不会得到结果，它总是计算为false。ng - 如果不在内部指令中进行评估

要尝试并指出问题，我尝试了一个简单的内联表达式（下面），但是即使这样也总是计算为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) { 

    } 
    }; 
})

UPDATE

此代码工作完全作为一个独立的jsfiddle。看起来这个问题与我将这个指令添加为另一个指令的孩子的事实有关。父指令是第三方，并且手动转换它的孩子。

UPDATE

好我得到了这个工作。问题在于父指令删除了任何子指令，然后将其添加回去而不编译它们。我不得不把我自己的第三方父指令的拷贝，并在链接功能更改此：

// 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); 
    }

来源

2017-03-17 Si-N

-1

解决请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>

希望这将帮助你

来源

2017-03-17 10:42:32

感谢快速反应，但仍不为我工作。只有你在代码中可以看到的区别是明确的注释方括号已被删除。问题必须是上下文相关的。我删除了ng-if和div节目。我完全复制和粘贴你的代码，同样的问题。 –

UPD：

因为这个问题导致的指令的指令，并且没有$编译，角不会知道的NG-如果是指令。那么在链接函数中，构建用于让模板变得模糊的元素。

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>

来源

2017-03-17 10:48:06 Pengyy

对不起，错过了最后一行。更新我的问题。我复制并粘贴了你的代码。完全相同的问题。在我的应用程序中，ng-if没有被评估。当我删除ng时 - 如果完全是div节目。我可以把任何表达式放在ng-if：true，一个方法调用，1> 0等等，它永远不会返回true。 –

@ Si-N是否能够在你的浏览器上正常工作？（在复制到本地环境之前，只需点击'Run code snippet'按钮即可） – Pengyy

是的，你的代码和我的原始代码在jsfiddle中完美工作。但它不适用于我的应用程序。我刚刚意识到这个问题似乎是一个指令，是另一个指令的孩子，正在做手动transcluding它的孩子。 –

如果添加多条线路到模板中使用的每一行的\结束时断裂线

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

    } 
    } 
}]);

Demo

来源

2017-03-17 10:53:17

我认为最好使用'而不是\'作为多行模板。 – Pengyy

如果你有一个很长的模板代码，很难理解代码如果它在一行中。在你缩小文件的时候开发之后就没问题了。 –

注意它是'（在键盘上的Ecs旁边），而不是'。 – Pengyy

ng - 如果不在内部指令中进行评估

回答

相关问题