Question

在这段代码中，我使用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>

Answer 1

你的控制器应该永远不会注意到标记。这就是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字符串。

Answer 2

你的方法不正确。首先，您的ng-repeat位于ul，scope.myHTML将循环ul，而不是在ul中添加DOM，因此您应该ng-repeat位于li 1}}。像这样的代码：

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

也许，你只想像jQuery一样添加DOM。像这样的代码：

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

Answer 3

我使用了$timeout函数，它与我一起工作：示例代码

$scope.allowDelete = false;
$scope.allowDeleteCount = '';

$timeout(function () {
   $('div').append($compile('<button type="button" ng-show="allowDelete" class="btn btn-danger btn-sm btn-delete"><i class="fa fa-trash-o"></i> Delete <span>{{allowDeleteCount}}<span></button>')($scope))
},1000);

ng-show不适用于我的控制器

3 个答案: