如何动态地将包含在文件夹中的控制器绑定到 angularjs 中的视图

21 浏览
0 Comments

如何动态地将包含在文件夹中的控制器绑定到 angularjs 中的视图

我在根目录下有一个名为\"controller\"的文件夹里有一个控制器。\n在路由改变时，我想要将对应的视图附加到视图中。我使用的是angular-ui-router。\n控制器/one.js\n

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

\ntest.html\n

    
    
    
        AngularJS: UI-Router Quick Start
        
        
    
    
          Quick Start

\nlogin.html\n

             用户名: 
            
             密码:

\nControllers/LoginController.js\n

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

\n如果我在loginController.js中使用\'sub\'而不是\'subsd\'，路由将停止工作。

0

2 答案

0 Comments

AngularJS是一个流行的JavaScript框架，用于构建单页应用程序。在使用AngularJS时，有时会遇到将控制器与视图动态绑定的问题。以下是一个关于如何解决这个的问题：

问题出现的原因是用户在尝试将控制器绑定到视图时遇到了错误。错误信息显示控制器未定义。用户尝试使用小写的控制器名称，而实际上控制器的名称以大写字母开头。解决方法是将控制器名称的第一个字母改为大写，并确保在HTML文件中正确引用了控制器文件。

用户进行了必要的更改，但仍然遇到相同的错误。这表明可能还存在其他错误。为了验证这一点，用户准备了一个jsFiddle示例来展示代码是可以正常工作的。用户建议检查模块的定义是否正确，并确认控制器是否在正确的模块中。

用户尝试了建议的更改，但发现当更改模块定义后，路由不再正常工作。点击链接时，视图没有显示。这表明'子'和'myapp'这两个模块的定义可能存在问题。用户尝试了不同的更改，但问题仍然存在。

最后，用户尝试了将控制器属性从yapp.js中移除，并将代码移动到one.js中的解决方案。用户重新定义了模块并进行了配置。然后，用户建议在聊天室中继续讨论问题，以便进一步解决这个问题。

以上是关于如何动态将包含在文件夹中的控制器绑定到AngularJS视图的讨论。

0
0 Comments

问题的原因是在代码中出现了一些错误，导致绑定控制器到视图时出现了问题。解决方法是进行以下几个步骤：

1. 从login.html模板文件中移除<div ng-controller="loginController">。

2. 将'ngCookies'依赖项移动到controllers/one.js文件的sub模块定义中（angular.module('sub',["ui.router", "ngCookies"])）。

3. 在controllers/logincontroller.js文件中将模块名称从subsd更改回sub，并从sub模块调用中移除第二个参数，使其看起来像这样：angular.module('sub').controller(...)。

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

这个angular.module('moduleName', [...dependencies])是模块的setter，而这个angular.module('moduleName')是模块的getter。

在将代码模块化时，我犯了这些错误。当我将所有控制器放在一个文件中时，一切都正常。感谢您指出代码中的问题。

0