Question

对于任何了解Angular的人来说，这应该很容易 - 另一方面，我对它非常陌生。我试图使用ng-include汇总一个简单的示例，但不清楚为什么包含中的变量没有更新。

我在页面中包含了一些html（不确定是否需要ng-model）：

<div ng-model="template" ng-include="template.url"></div>

我有一个按钮：

<a class="btn btn-lg btn-success" ng-model="template" ng-click="switch()" ng-href="#">Change!</a>

从控制器调用一个如下所示的函数：

app.controller('MainCtrl', function ($scope) {
        $scope.templates =
        [ { name: 'Template1', url: 'views/template1.html'},
        { name: 'Template2', url: 'views/template2.html'} ];

    $scope.template = $scope.templates[0];

    $scope.switch = function() {
        $scope.template = $scope.templates[1];
        console.log($scope.template);
        return $scope.template;
    };
}

）;

控制台中显示的变量？正确。但页面上没有任何变化。

更新：所以这段代码有效。需要删除href属性，在某些情况下会重新加载页面。如果这是真的，那么有没有办法做到这一点，其中有一个故障保险？即，没有javascript，href工作正常，但是当javascript工作时，ng-include有效吗？

Answer 1

看起来没问题，try it in this plunkr。我唯一改变的是模板的URL。

Here is a fiddle也表明它可以使用和不使用ng-href <a class="btn btn-lg btn-success" ng-click="switch()" ng-href="#">Change!</a>
<a class="btn btn-lg btn-success" ng-click="switch()">Change!</a>
在看到Sunil的评论之后，我在bootstrap css中添加了一个明确表示不需要href来获得所需的样式。它可以毫无问题地删除。但是，不幸的是，plnkr和jsfiddle并没有重现你所经历的重新加载。

动态更新ng-include

1 个答案: