'ListCtrl' 不是函数，未定义

Question

不太清楚这是怎么回事，但我有一些东西在 Monaca 之外运行得很好，一旦在 Monaca 我得到了这个： 错误：[ng:areq] 参数 'ListCtrl' 不是函数，未定义

代码如下：

<script>
var app = ons.bootstrap('propertyDeal', ['onsen']);
app.factory('Property', function () {

    /**
    * Constructor, with class name
    */
    function Property(newProperty) {
        // Public properties, assigned to the instance ('this')
        this.purchasePrice = newProperty.pprice;
        this.marketValue = newProperty.mv;
        this.stampDuty = newProperty.stamp;
        this.sourcingFee = newProperty.sourcing;
        this.legaFee = newProperty.legal;
        this.otherFee = newProperty.other;
      }

    /**
    * Public method, assigned to prototype
    */
    Property.prototype.getPurchasePrice = function () {
        return this.purchasePrice;
    };

    return {
        createNew: function(newProperty) {
            console.log( "Alert accomplished" );
            return new Property(newProperty);
        }
    };
});

app.factory('portfolio', function(Property){
    var portfolio = {};
    portfolio.list = [];

    portfolio.add = function(newProperty){
        var prop = Property.createNew(newProperty);
        portfolio.list.push(prop);
        alert(prop.purchasePrice);
    };

    return portfolio;
}); 

app.controller('ListCtrl', function(portfolio) {
    var self = this;
    self.portfolio = portfolio.list;
});

app.controller('PostCtrl', function(portfolio){
    var self = this;

    self.addProperty = function(newProperty){
        portfolio.add(newProperty);
    }; 
});

</script>

<ons-navigator>
<ons-page>
    <div class="container" ng-controller="TopMenuController" ng-init="init('Initial investment','ion-social-usd')">
        <div ng-include="url"></div>
    </div>

    <div style="text-align: center">
        <h2>Initial investment</h2>

        <ul class="list">
                <input type="hidden" ng-model="newProperty.id" placeholder="id">
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
            </li>
            <li class="list__item">
                <input type="text" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
            </li>
        </ul>
    </div>
    <br />
    <div data-ng-controller="ListCtrl as list">
        <p ng-repeat="prop in list.portfolio track by $index">
            New Object: {{prop.purchasePrice}}: {{prop.legaFee}} </p>
    </div>

    <div ng-controller="PostCtrl as post">
        <input type="button" ng-click="post.addProperty(newProperty)" value="Create Property"></input>
        <p>{{newProperty}}</p>
    </div>
 </ons-page>
</ons-navigator>

我不明白这有什么问题，例如在小提琴中测试时知道完全相同的代码正在工作 http://jsfiddle.net/XmWUP/129/

感谢您的帮助

Answer 1

您的代码看起来不错，除了未定义的ng-controller="TopMenuController"。

可能问题与 Angular 版本有关，您的 jsfiddle 示例使用 1.2.6，但 Monaca 使用 1.4.3 和 Onsen UI 1.3.11。

检查这个CodePen example。