我刚刚开始学习 Angular JS 并创建了一些基本示例,但是我遇到了以下问题。
我创建了 2 个模块和 2 个控制器。
shoppingCart -> ShoppingCartController namesList -> NamesController
每个控制器都有关联的视图。第一个视图渲染得很好,但第二个没有渲染。没有错误。
http://jsfiddle.net/ep2sQ/
请帮我解决这个问题。
还有可能在 View 中添加控制台以检查从 Controller 传递的值。
例如,在下面的 div 中,我们可以添加 console.log 并输出控制器值
<div ng-app="shoppingCart" ng-controller="ShoppingCartController"> </div>
因此,基本上正如 Cherniv 所提到的,我们需要引导模块以在同一页面内拥有多个 ng-app。非常感谢所有的投入。
var shoppingCartModule = angular.module("shoppingCart", []) shoppingCartModule.controller("ShoppingCartController", function($scope) { $scope.items = [{ product_name: "Product 1", price: 50 }, { product_name: "Product 2", price: 20 }, { product_name: "Product 3", price: 180 }]; $scope.remove = function(index) { $scope.items.splice(index, 1); } } ); var namesModule = angular.module("namesList", []) namesModule.controller("NamesController", function($scope) { $scope.names = [{ username: "Nitin" }, { username: "Mukesh" }]; } ); angular.bootstrap(document.getElementById("App2"), ['namesList']); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController"> <h1>Your order</h1> <div ng-repeat="item in items"> <span>{{item.product_name}}</span> <span>{{item.price | currency}}</span> <button ng-click="remove($index);">Remove</button> </div> </div> <div id="App2" ng-app="namesList" ng-controller="NamesController"> <h1>List of Names</h1> <div ng-repeat="_name in names"> <p>{{_name.username}}</p> </div> </div>