Question

我是角色的新手，正在处理一个小项目，该项目根据请求将多个模块加载到单个页面上。目前我只是试图让应用程序使用staffdetails.html模块加载参数并使用控制器更新它。目前只显示

您好

员工详情......

因此未加载控制器的值。我已尝试过角度1.2传统和1.5.9（我认为最新的稳定版），因为我知道语法显然已经改变了。

这是index.html页面。

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
  <!-- SCROLLS -->
  <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" type="text/css" src="lib/bootstrap.min.css" />

    <!-- SPELLS -->
    <!-- load angular and angular route via CDN -->
    <script src="lib/angular.min.js"></script>
    <script src="lib/angular-ui-router.min.js"></script>
    <script src="lib/jquery-2.1.1.min.js"></script>1


    <script>
        (function() {
            angular.module("app", ["ui.router"]);
        }());
    </script>

    <!-- Services -->
    <!--script src="app/service/informationStorage-Service.js"</script-->

    <!-- Controllers -->
    <script src="app/controller/additionalfeatures-controller.js"></script>
    <script src="app/controller/outcome-controller.js"></script>
    <script src="app/controller/staffdetails-controller.js"></script>
    <script src="app/controller/training-controller.js"></script>

    <script>
    $(document).ready (
        function () {
            var app = angular.module("app");
            console.log("Index1");
            app.config(["$stateProvider", "$urlRouterProvider", "$compileProvider", function ($stateProvider, $urlRouterProvider, $compileProvider) {
                //$compileProvider.debugInfoEnabled(false);
                $stateProvider.state(
                    "staffdetails", {
                        url: "/staffdetails",
                        views: {
                            "": {
                                templateUrl: "template/staffdetails.html",
                                controller: "StaffDetailCtrl"
                            }
                        }
                    }
                );
            console.log("Index2");
                $urlRouterProvider.otherwise("");
            } ]);
        } ());

    </script>
</head>
<body>
Hello
    <!-- MAIN CONTENT AND INJECTED VIEWS -->
    <div id="main">
        <div ui-view ng-cloak></div>
    </div>
</body>

staffdetails-controller.js

(function() {
"use strict";
var app = angular.module("app");

app.controller('StaffDetailCtrl', ['$scope', function($scope) {

    console.log("StaffDetailCtrl");

    function saveDetails($scope) {

        $scope.testing = ["This is Working"];
    };

    saveDetails();
}]);

});

最后被称为模块的页面

<div class="container">
    <p>Staff Details...</p>
    <p> {{testing}} </p>
</div>

Answer 1

问题是你没有将$ scope传递给你的saveDetails()函数。

我稍微修改了你的代码，所以它可以在一个片段中使用。但是，主要的变化是这一行：

    saveDetails($scope);

请在此处查看工作代码段：

<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app">
<head>
    <!-- SCROLLS -->
    <!-- load bootstrap and fontawesome via CDN -->
    <link rel="stylesheet" type="text/css" src="lib/bootstrap.min.css" />

    <!-- SPELLS -->
    <!-- load angular and angular route via CDN -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
    <script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>



    <!-- Controllers -->

    <script>
        angular.module("app", ["ui.router"]);
        var app = angular.module("app");

        app.controller('StaffDetailCtrl', ['$scope', function($scope) {
            console.log("StaffDetailCtrl");
            function saveDetails($scope) {
                $scope.testing = ["This is Working"];
            }

            saveDetails($scope);
        }]);

        console.log("Index1");
        app.config(["$stateProvider", "$urlRouterProvider", "$compileProvider", function ($stateProvider, $urlRouterProvider, $compileProvider) {
            //$compileProvider.debugInfoEnabled(false);
            $stateProvider.state(
                    "staffdetails", {
                        url: "/staffdetails",
                        views: {
                            "": {
                                template: '<div class="container">' +
                                '<p>Staff Details...</p>' +
                                '<p> {{testing}} </p>' +
                                '</div>',
                                controller: "StaffDetailCtrl"
                            }
                        }
                    }
            );
            console.log("Index2");
            $urlRouterProvider.otherwise("/staffdetails");
        } ]);

    </script>
</head>
<body>
Hello
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
    <div ui-view ng-cloak></div>
</div>
</body>

无法初始化AngularJS控制器：无法设置未定义

1 个答案: