Question

当这是我的主要html文件时：

<html ng-app="app">
...
<body ng-controller="MainCtrl">
{{myData}}
<button ng-click="update()">Update</button>
<ng-view><ng-view>
</body>

这是我的观点：

<button ng-click="update()">Update</button>

和js：

var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/', { templateUrl: 'tpl.html', controller: 'MainCtrl' })
}]);

app.controller('MainCtrl', ['$scope', function () {
    $scope.update = function () {
        $scope.myData = 'upd';
console.log($scope.myData)
}
}]);

我在视图中看到了我的按钮，并且在控制台内部没有错误。当我点击它时，我会在控制台中看到更新＆＃39;，但是在页面内部它没有更新。当我这样写：

$scope.update = function () {
  $scope.$apply(function(){
    $scope.myData = 'upd';
  })
}

我有错误＆＃34;已在进行中＆＃34;。我该如何解决这个问题？

Answer 1

问题是您正在加载MainCtrl两次。您应该像在<body>中一样，或在路由.when('/', { templateUrl: 'tpl.html', controller: 'MainCtrl' })中放置一次或HTML。选择一个。

实际上，你的代码有点奇怪。您在主HTML和视图中编写<button>两次？你应该只有一个，像这样：

HTML：

<html ng-app="app">
...
<body>
    <div ng-view></div>
</body>

TPL.HTML：

{{myData}}
<button ng-click="update()">Update</button>

JS：

var app = angular.module('app', ['ngRoute']).config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/', { templateUrl: 'tpl.html', controller: 'MainCtrl' })
}]);

app.controller('MainCtrl', ['$scope', function () {
    $scope.update = function () {
        $scope.myData = 'upd';
    }
}]);

您的tpl.html将位于<div ng-view>内，因此，您无需重复此代码。

Angular模板不在视图内更新，但$ scope是更新

1 个答案: