我有一些内容希望使用 Angular 加载到 div 中。例如:
<div class="number-and-description" ng-controller="thingDetails">
<div class="number" ng-click="loadContent(thing.number, thing.description, thing.status)" ng-cloak>{{ thing.number }}</div>
<p class="description" ng-click="loadContent(thing.number, thing.description, thing.status)" ng-cloak>{{ thing.description }}</p>
</div>
我在这个 div 之外还有另一个 View ，如下所示:
<!-- Main Content Area -->
<section class="main-content group" ng-controller="thingDetails">
<h1 ng-cloak>{{ thingNumber }}</h1>
<div ng-cloak>{{ thingDescription }}</div>
<div ng-cloak>{{ thingStatus }}</div>
</section>
在我的 app.js 文件中，我有以下代码:
thingApp.controller('thingDetails', ["$scope", function($scope) {
$scope.loadContent = function(number, description, status) {
$scope.thingNumber = number;
$scope.thingDescription = description;
$scope.thingStatus = status;
return $scope;
};
}]);
我的问题是，为什么当这些值更改时主要内容区域 div 不更新？现在它仍然是空白的。 thing.number、thing.description 在我点击的 div 中加载良好 - 该数据来自硬编码的 JSON，看起来很好。问题是，当我单击 div 时，其他主要内容 div 不会显示/更新数据。有人可以帮我吗？请注意，当我 console.log(number) 或 console.log(description) 等时，我可以看到正确的值，因此它们被正确传递到 loadContent() 函数。
最佳答案
您有两个独立的 Controller 实例 thingDetails ，而不是一个。他们每个人都有自己的范围，并且不直接共享任何内容。查看此情况的一个简单方法是在 Controller 中放置一个 console.log() ，您将看到它在每次 Controller 初始化时运行
为了让 Controller 共享数据，您可以使用服务并将该服务注入(inject)到需要访问的任何地方。
或者，您可能不需要两个实例，可以将它们包装在 View 中的一个范围内
关于javascript - 使用 AngularJS 打开另一个 div 中的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31661737/