ng-show无法在我的控制器中动态添加的HTML中使用

debugcn 发表于 Dev

杰巴通

在此代码中，我使用ng-bind-html动态添加了经过清理的HTML代码，但是在将ng-show分配给html时，它不起作用。我尝试使用$ compile，但到目前为止也没有。

我正在尝试使用ng-show隐藏和显示元素，但两者均可见。

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>

迪伦·瓦特（Dylan Watt）

您的控制器几乎永远都不会意识到标记。这就是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字符串。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。