Ng-app bir sayfa içinde Birden fazla AngularJS

SORU

2 EYLÜL 2013, PAZARTESİ

Ng-app bir sayfa içinde Birden fazla AngularJS

Sadece Açısal JS öğrenmeye başladım ve şu sorun bende kaldı ancak bazı temel örnekler yarattı.

2 modül ve 2 denetleyicileri oluşturduk.

shoppingCart -> ShoppingCartController
namesList -> NamesController

Her denetleyici için ilgili görüşler var. İlk Görünüm güzel işler ama ikinci render değil. Hataları yok.

http://jsfiddle.net/ep2sQ/

Bana bu sorunu çözmek yardım lütfen.

Orada da görünümde konsol Kumanda geçti ne onay eklemek için herhangi bir olasılık.

aşağıdaki div örneğin ekliyoruz konsol.giriş ve çıkış kontrol değerleri

<div ng-app="shoppingCart" ng-controller="ShoppingCartController">
</div>

CEVAP

3 EYLÜL 2013, Salı

Cherniv tarafından belirtildiği gibi temelde modülleri ng-app aynı sayfa içinde birden çok olması bootstrap ihtiyacımız var. Tüm giriş için teşekkür ederiz.

<html>
<head>
    <script src="angular.min.js"></script>
</head>
<body>
    <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>
    <script>
            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>
</body>
</html>

Bunu Paylaş: