Question

如何在AngularJs中同时使用页面级功能和脚本文件工厂，服务等。

Html代码： -

<div ng-app="mainApp">
        <div class="row" ng-controller="myController">
            <p><b>Message From Service: </b>{{serviceMsg}}</p>
            <p><b>Message From Factory: </b>{{factoryMsg}}</p>
            <p><b>Message From Provider:</b>{{providerMsg}}</p>
        </div>

        <div class="row" ng-controller="CalcController">
            <p>Enter a number: <input type="number" ng-change="myFunc()" ng-model="number" /></p>
            <button ng-click="square()">X<sup>2</sup></button>
            <p>Result: {{result}}</p>
        </div>

        <div class="row" ng-controller="TestController">
            <p>Results:{{Results}}</p>
        </div>
    </div>

脚本代码： -

<script>
        angular.element(document).ready(function () {
            angular.bootstrap(document, ['mainApp']);
        });

        var app = angular.module("mainApp", []);
        app.controller('TestController', function ($scope) {
            $scope.Results = '5';
        });
    </script>

    <script src="angularjs/main.js"></script>

如果我单独运行main.js块输出显示正常，但是如果我同时运行页面级TestController和main.js函数则会出现错误

错误：

Error: [ng:areq] http://errors.angularjs.org/1.2.1/ng/areq?p0=TestController&p1=not%20a%20function%2C%20got%20undefined

那么如何在AngularJS函数中运行页面级控制器和外部脚本文件功能..请分享您的经验..

Answer 1

Check this plunkr for your example fix

请注意<script>代码序列的变化以及angular.module("mainApp").controller('TestController',的调用方式

<script src="script.js"></script>
<script>
    angular.module("mainApp")
    .controller('TestController', function ($scope) {
        $scope.Results = 5;
    });
</script>

如何在angularJS中使用页面行功能和脚本功能

1 个答案: