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 - 如果不在內部指令中進行評估

回答

相關問題