NG出現不工作的動態我的控制器

Please see relevant JSFiddle NG出現不工作的動態我的控制器

內添加HTML在這個代碼中，我使用NG綁定，HTML，但分配NG-展現給HTML時它不工作，在消毒的HTML代碼動態添加。我嘗試使用$編譯，但迄今沒有。

我試圖隱藏和使用NG-顯示顯示元素，但均可見。

JS：

var app = angular.module('App', ['ngSanitize']) 

app.controller('MyCtrl', function($scope, $compile) { 

    $scope.myHTML = []; 

    $scope.myHTML.push('<li ng-show = "visible(1)">Test1</li>'); 
    $scope.myHTML.push('<li ng-show = "visible(0)>Test2</li>'); 

$scope.visible = function(arg) 
{ 
    if (arg == 1) return true; 
    if (arg == 0) return false; 

} 

    $compile($scope.myHTML)($scope); 

});

HTML：

<div ng-app="App"> 
    <div ng-controller="MyCtrl"> 
     <ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul> 
    </div> 
</div>

來源

2015-07-21 BDillan

你的控制器應幾乎從來不知道的標記，直到永遠。這是MVC的力量。你應該重複一個真實的數據集並在你的視圖中建立標記。如下所示，在控制器中設置items = [item1, item2]。

<div ng-app="HelloApp"> 
    <div ng-controller="MyCtrl"> 
     <ul ng-repeat="item in items"> 
      <li ng-show = "test($index)">Test{{$index}}</li> 
     </ul> 
    </div> 
</div>

如果你真的需要做你正在做的方式，你應該使用一個自定義的指令，並使用angular.element您編譯的HTML附加到當前指令元素。 ng-bind-html不期望一個編譯節點，而只是一個html字符串。

來源

2015-07-21 01:31:11

嗯，我實際使用一個指令，所以我不能做到這一點。我的真正的代碼是這樣的：模板： ''。由於添加的項目數量可以變化。 – BDillan

爲什麼你的指令模板裏不能有重複的'li'呢？看看我的編輯，如果你真的需要按照你想要的方式來做，你需要'angular.elements'，append方法。 ng-bind-html的唯一有效用法是如果html在數據庫中定義，並且每個項目都是唯一的，例如使用tinymce來定義html。但是，您的問題意味着每個項目具有相同的模板，因此應該在視圖中定義。 –

你的方法是不正確的。首先，你ng-repeat是ul，scope.myHTML意志代替ul加入DOM環ul，所以你應該在ng-repeatli。像這樣的代碼：

<ul> 
    <li ng-repeat="snippet in myHTML" ng-bind-html="snippet" ng-show="snippet.visible">{{ snippet.content }}</li> 
</ul>

app.controller('MyCtrl', function($scope, $compile) { 
    $scope.myHTML = [{content:'Test1', visible:1},{content:'Test2', visible:0}]; 
    $scope.visible = function(arg) 
    { 
     if (arg == 1) return true; 
     if (arg == 0) return false; 
    } 
});

也許，你只想添加DOM像jQuery。像這樣的代碼：

<ul> 
</ul>

app.controller('MyCtrl', function($scope, $compile) { 
    $scope.visible = function(arg) 
    { 
     if (arg == 1) return true; 
     if (arg == 0) return false; 
    } 
    $('ul').html($compile('<li ng-show="visible(1)">Test1</li><li ng-show="visible(0)">Test2</li>')($scope)); 
});

來源

2015-07-21 02:34:31 user4898717

NG出現不工作的動態我的控制器

回答

相關問題