Question

我有一些带有div指令的ng-show，在页面加载时可以正常工作。

现在，在某些情况下，我的页面上会出现新的DOM元素（同样div s）。他们已经有ng-show指令但由于某些原因这些表达式没有被评估。有没有办法'强迫'AngularJS重新计算所有ng-show表达式？

不是JS开发人员，设法做了一点演示： https://jsfiddle.net/xasjeqe5/1/

编辑链接到演示错误。这里还有代码：

HTML：

<div ng-controller="MyCtrl">
    <div ng-show="good(1)">TEST1</div>
    <div ng-show="good(2)">TEST1</div>

    <input type="button" ng-click="add()" value="add"/>
</div>

JavaScript的：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

$scope.good = function(i) {
    return i>5;
};

$scope.add = function() {
    var newDiv = document.createElement("div");
    var newContent = document.createTextNode("I am invisible!");
    var att = document.createAttribute("ng-show");
    att.value = "good(4)";
    newDiv.setAttributeNode(att);
    newDiv.appendChild(newContent);
    document.body.appendChild(newDiv); 
};
}

编辑2：以避免一些混淆。

我并不是真的只想集成AngularJS来添加新元素。我的问题和演示的原因是我有一些服务器端渲染涉及返回准备好的HTML数据。必须将此HTML数据“插入”现有页面（这就是为什么所有操作都在发生）。另一方面，准备好的HTML数据是纯HTML和AngularJS指令的混合。

Answer 1

您正在Angular世界之外手动创建和附加DOM节点。 Angular对它们一无所知，所以它们不会像你期望的那样表现出来。

Angular鼓励您根据对数据模型的绑定进行思考，而不是根据DOM元素进行思考。然后Angular可以为您处理大部分DOM操作。

以下示例显示了向屏幕添加元素并可选择将其隐藏ng-show。请注意，我们没有显式创建DOM元素 - 而是将项添加到数组并更改其属性。然后，在我们的视图中，我们使用转发器绑定到此数组，允许Angular为我们创建新的<div>元素。每个项目还有一个原始HTML属性，我们使用ng-bind-html绑定它们。我们需要通过$sce服务传递此信息，以告知Angular信任我们的HTML字符串。这会关闭Angular内置的XSS保护，否则会导致错误。

小提琴：https://jsfiddle.net/z4odkfne/1/

<强>控制器

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, $sce) {

    $scope.items = [];

    $scope.add = function() {
        $scope.items.push({
            name: "New item", 
            show: true,
            html: $sce.trustAsHtml('<span style="color:red">some html</span>')
        })
    };

    $scope.hide = function(item) {
        item.show = false;
    }
}

查看

<div ng-controller="MyCtrl"> <div ng-repeat="item in items" ng-show="item.show"> {{item.name}} {{$index}} <span ng-bind-html="item.html"></span> <input type="button" ng-click="hide(item)" value="Hide me" /> </div> <input type="button" ng-click="add()" value="add"/> </div>

AngularJS ng-show不适用于新的DOM元素

1 个答案: