angularjs - Angular JS 范围不从包含的模板更新

Question

所以我有下面的 index.html:

<div ng-controller="UsersController">
<div ng-include='"assets/users/partials/template.html"'></div>
<a ng-click="get_data()">Get</a>
</div>

模板.html:

<input type="text" ng-model="SearchUser" name="SearchUser" />

我的 Controller :

app.controller('UsersController', ['$scope', function($scope) {
    $scope.get_data = function(){ console.log($scope.SearchUser); };
}
]);

所以在上述情况下，在点击 anchor 时，我在 $scope.SearchUser 范围值中得到了未定义。 但是，如果我将该输入从模板中取出并放入主 HTML 中，它就可以工作。

我检查了多个 Controller 声明和其他内容，但没有任何效果。

我使用的是 angular 1.2.25 版本。

Answer 1

ng-include 定义了它自己的作用域，它继承自 Controller 作用域。所以 SearchUser 已设置，但作为子范围的属性。

与往常一样，解决方案是在您的 ng-model 中添加一个点，并在 Controller 范围内定义外部对象:

$scope.state = {};

并且，在 HTML 中:

<input type="text" ng-model="state.SearchUser" name="SearchUser" />

这样，angular 将从子作用域中获取状态字段。由于子作用域原型(prototype)扩展了 Controller 作用域，因此它将在 Controller 作用域中找到它，并将写入状态对象的 SearchUser 属性。