javascript - 如何将文件夹中包含的 Controller 动态绑定(bind)到AngularJS中的 View

我在根目录下名为controller的文件夹中有一个 Controller 。我有一个 View ，我想在路线更改时附加到相应的 View 。我正在使用 Angular-ui-router。

Controller /one.js

angular.module('sub',["ui.router"]).config(function($stateProvider){
$stateProvider
    .state('index', {
        url: "/login",
        views: {
            "viewA": {
                templateUrl: "login.html"
            }
        }
    })
    .state('register', {
        url: "/register",
        views: {
            "viewA": {
                templateUrl: "register.html" 
            }
        }
    })
    .state('upload', {
        url: "/upload",
        views: {
            "viewA": {
                templateUrl: "upload.html" 
            }
        }
    })
})

测试.html

    <!DOCTYPE html>
    <html ng-app="sub">

    <head>
        <title>AngularJS: UI-Router Quick Start</title>
        <!-- Bootstrap CSS -->
        <link href="bootstrap.min.css" rel="stylesheet">
    </head>

    <body class="container">

      <div class="navbar">
        <div class="navbar-inner">
          <a class="brand" ui-sref="index">Quick Start</a>
          <ul class="nav">
            <li><a ui-sref="index">Home</a></li>
            <li><a ui-sref="register">Register</a></li>
            <li><a ui-sref="upload">upload</a></li>
          </ul>
        </div>
      </div>

      <div class="row">
        <div class="span6">
          <div class="well" ui-view="viewA"></div>        
        </div>
      </div>
  <script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="Controllers/one.js"></script>
<script type="text/javascript" src="angular-cookies.js"></script>
<script type="text/javascript" src="Controllers/loginController.js"></script> 
<script type="text/javascript" src="Controllers/uploadController.js"></script>
<script type="text/javascript" src="Controllers/registerController.js"></script>
<script type="text/javascript" src="angular-ui-router.js"></script> 
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</body>

</html>

<div ng-controller="loginController">
<p>
             UserName: 
            <input id="director" type="text" ng-model="mUserName"/>
        </p>

        <p>
             Password: 
            <input id="actor" type="text" ng-model="mPassWord"/>
        </p>
        <button ng-click="login()">Login</button>
 </div>

Controller /LoginController.js

angular.module('subsd',["ngCookies"]).controller('loginController', ['$http','$scope','$cookies',function($http,$scope,$cookies) {})]);

如果我在 loginController.js 中提到“sub”而不是“subsd”，路由就会停止工作。

最佳答案

最终答案包括一些要做的事情:

删除 <div ng-controller="loginController">来自 login.html 模板文件。
移动'ngCookies'依赖于sub controllers/one.js 文件中的模块定义 ( angular.module('sub',["ui.router", "ngCookies"]) )。
在 controllers/logincontroller.js 文件中，将模块名称从 subsd 更改为至sub再次返回并从 sub 中删除第二个参数模块调用，使其看起来像这样: angular.module('sub').controller(...) .

当您之前更改模块名称时，您试图重新定义它，这是一个错误。

这个

angular.module('moduleName', [...dependencies])

是模块setter，而这个

angular.module('moduleName')

是模块getter。

关于javascript - 如何将文件夹中包含的 Controller 动态绑定(bind)到AngularJS中的 View ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28727173/

javascript - 如何将文件夹中包含的 Controller 动态绑定(bind)到AngularJS中的 View

上一篇：javascript - AngularJS 将一个数组放入 $cacheFactory 中

下一篇：javascript - Chart.js 在页面加载时显示工具提示