javascript - 动态更新 ng-include

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>

从 Controller 调用一个函数，如下所示:

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 属性，在某些情况下会重新加载页面。如果这是真的，那么有没有一种方法可以做到这一点，其中有故障保护？即，href 在没有 javascript 的情况下工作正常，但是 ng-include 在 javascript 工作时工作？

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 没有重现您所经历的重新加载。