Question

我需要添加一个带有函数和另一个函数的控制器来替换{with [[（我需要使用Jekyll）。

我有两个ng-app：

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!");
      };
    });

它似乎不正常。它并没有取代{与[。 Error

错误是什么？当我在页面中使用html组件（myApp和invoice）时出现错误。如果我禁用“myApp”，则第二个正常工作。

分辨 我在同一个html中不能有超过1个角度实例。 AngularJS应用程序不能互相嵌套。

Answer 1

根据docs您必须使用invoic1.config(....

示例工作正常 - 为您的代码提供一个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>

Angular - 同一个html

1 个答案: