小编典典

AngularJS 页面内的多个 ng-app

all

我刚刚开始学习 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>

阅读 62

收藏
2022-08-01

共1个答案

小编典典

因此,基本上正如 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>
2022-08-01