角 - 在相同的HTML

Question

2+納克應用內指令我需要與功能和其他功能添加的控制器，以取代用{[[（我需要使用化身）。

我有兩個NG-應用：

• 對myApp
• 發票

兩個文件中的JavaScript：

• myApp.js
• invoice.js

每個文件的內容如下：

myApp.JS

var myApp = angular.module('myApp', []); 
myApp.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('[['); 
    $interpolateProvider.endSymbol(']]'); 
    }); 

HTML對myApp：

<div ng-app="myApp" ng-init="qty=1;cost=2"> 
    <b>Invoice:</b> 
    <div> 
     Quantity: <input class="form-control" type="number" min="0" ng-model="qty"> 
    </div> 
    <div> 
     Costs: <input class="form-control" type="number" min="0" ng-model="cost"> 
    </div> 
    <div> 
     <b> 
     Total: 
     </b> [[qty * cost | currency]] 
    </div> 
</div> 

HTML發票：

<div ng-app="invoice1" ng-controller="InvoiceController as invoice"> 
<form class="form-horizontal" id="frm_basic"> 
    <b>Invoice:</b> 
    <div> 
    Quantity: <input type="number" min="0" ng-model="invoice.qty" required > 
    </div> 
    <div> 
    Costs: <input type="number" min="0" ng-model="invoice.cost" required > 
    <select ng-model="invoice.inCurr"> 
     <option ng-repeat="c in invoice.currencies">[[c]]</option> 
    </select> 
    </div> 
    <div> 
    <b>Total:</b> 
    <span ng-repeat="c in invoice.currencies"> 
     [[invoice.total(c) | currency:c]] 
    </span> 
    <button class="btn" ng-click="invoice.pay()">Pay</button> 
    </div> 
</form> 
</div> 

個

invoice.js：

var invoice1 = angular.module('invoice1', [], function($interpolateProvider) { 
     $interpolateProvider.startSymbol('[['); 
     $interpolateProvider.endSymbol(']]'); 
    }); 

    invoice1.controller('InvoiceController', function() { 
     this.qty = 1; 
     this.cost = 2; 
     this.inCurr = 'EUR'; 
     this.currencies = ['USD', 'EUR', 'CNY']; 
     this.usdToForeignRates = { 
     USD: 1, 
     EUR: 0.74, 
     CNY: 6.09 
     }; 

     this.total = function total(outCurr) { 
     return this.convertCurrency(this.qty * this.cost, this.inCurr, outCurr); 
     }; 
     this.convertCurrency = function convertCurrency(amount, inCurr, outCurr) { 
     return amount * this.usdToForeignRates[outCurr]/this.usdToForeignRates[inCurr]; 
     }; 
     this.pay = function pay() { 
     window.alert("Thanks!"); 
     }; 
    }); 

似乎不正常工作。它不是用{來代替{。

什麼是錯？ 當我在頁面中使用兩個html組件（myApp和invoice）時，都會顯示錯誤。如果我禁用「myApp」，則第二個工作正常。

RESOLVED 我在同一個html中不能有超過1個角實例。 AngularJS應用程序不能相互嵌套。

Answer 1

根據你必須使用invoic1.config(....

的例子中，docs工作正常 - 提供您的代碼plunker所以我們可以幫助你。

var customInterpolationApp = angular.module('App', []); 
 

 
    customInterpolationApp.config(function($interpolateProvider) { 
 
    $interpolateProvider.startSymbol('//'); 
 
    $interpolateProvider.endSymbol('//'); 
 
    }); 
 

 

 
    customInterpolationApp.controller('DemoController', function() { 
 
     this.label = "This binding is brought you by // interpolation symbols."; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script> 
 
<div ng-app="App" ng-controller="DemoController as demo"> 
 
    //demo.label// 
 
</div>