Question

我是angularjs的新手。我试图在一个js文件中创建2个不同的模块，然后手动将其中一个模块引导到一个元素。这是在stackoverflow问题之一中提出的。但这似乎不起作用。这两个模块都可以独立工作。我不确定这里出了什么问题。这是我的代码： -

myApp.js

var app = angular.module("myApp", []);
var myController = app.controller("ctrl1", function($scope){
"use strict";
$scope.fname = "Bill";
$scope.lname = "Goldberg";
$scope.updatevalue = function () {
    $scope.fullname = $scope.fname + $scope.lname;
    //$scope.fname = "newName"
};
});
app.directive("w3TestDirective", function() {
    "use strict";
    return {
        template : "<h1>This is my life!</h1>"
    };
});

var loginController = angular.module('loginController', []);
loginController.controller('loginCntrl', function ($scope) {
"use strict";
$scope.username="email";
$scope.password="password";
$scope.present = false;
$scope.login = function () {
    "use strict";
    if ($scope.username == "Amar" & $scope.password == "Amar") {
        $scope.present=true;
        $scope.loginMessage = "logged in successfully";
    } else {
        $scope.present=true;
        $scope.loginMessage = "Invalid username or password";
    }
}
});

angular.bootstrap(document.getElementById("loginDiv"),['loginController']);

的index.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script-->
<script src="scripts/services/myApp.js"></script>
<!--script src="scripts/services/login.js"></script-->
<body>

  <div  id="demoDiv" ng-app="myApp" ng-controller="ctrl1">
    <span>Values:</span>
    <input type="text" ng-model="fname"/>
    <input type="text" ng-model="lname"/>
    <button ng-click="updatevalue()">fullname</button>
    <br></br>
    {{ fullname }}
    <br></br>
    <w3-test-directive></w3-test-directive>
  </div>
  <br></br>
  <div id="loginDiv" ng-app="loginController" ng-controller="loginCntrl">
    <input type="text" ng-model="username"/>
    <input type="text" ng-model="password"/>
    <button ng-click="login()">submit</button>
    <br></br>
    <div ng-if="present"> {{ loginMessage }} </div>
  </div>

</body>
</html>

Answer 1

这是完全错误的做法。您 CAN 将您的控制器放在多个模块中，但您应始终拥有一个模块，该模块是该应用的主要父级。

让我们假设myApp是您的父模块，并进行一些更改：

首先，将ng-app移动到body元素：

<body ng-app="myApp">

  <div  id="demoDiv" ng-controller="ctrl1">
...

接下来，从ng-app

中删除loginDiv

<div id="loginDiv" ng-controller="loginCntrl">

最后，将loginController模块注入到myApp模块中：

var app = angular.module("myApp", ['loginController']);

现在，应用程序可以毫无问题地连接两个控制器。

http://plnkr.co/edit/rkFY0ASCHaQUTByaHJg3?p=preview

Answer 2

我使用以下代码解决了我的问题： -

var app = angular.module("myApp", ['utilModule','loginModule']);
var myController = app.controller("ctrl1", function($scope){
"use strict";
$scope.fname = "Bill";
$scope.lname = "Goldberg";
$scope.updatevalue = function () {
    $scope.fullname = $scope.fname + $scope.lname;
    //$scope.fname = "newName"
};
});
app.directive("w3TestDirective", function() {
    "use strict";
    return {
        template : "<h1>This is my life!</h1>"
    };
});


<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.js"></script-->
<script src="scripts/services/myApp.js"></script>
<script src="scripts/services/util.js"></script>
<script src="scripts/services/login.js"></script>
<body ng-app="myApp">

  <div  id="demoDiv" ng-controller="ctrl1">
    <span>Values:</span>
    <input type="text" ng-model="fname"/>
    <input type="text" ng-model="lname"/>
    <button ng-click="updatevalue()">fullname</button>
    <br></br>
    {{ fullname }}
    <br></br>
    <div ng-controller="utilCntrl">
      {{ test }}
    <testDirective></testDirective>
    </div>
    <w3-test-directive></w3-test-directive>
  </div>
  <br></br>
  <div id="loginDiv" ng-controller="loginCntrl">
    <input type="text" ng-model="username"/>
    <input type="text" ng-model="password"/>
    <button ng-click="login()">submit</button>
    <br></br>
    <div ng-if="present"> {{ loginMessage }} </div>
  </div>

</body>
</html>

只有1个问题，testDirective标签不会在浏览器上打印任何内容。但这不是必要条件，所以我暂时忽略这一点。我意识到这就是@Claies发布的内容。克莱斯，非常感谢您的时间和精力。

Answer 3

您无法使用ng-app指令和angular.bootstrap函数来引导角度应用程序。您可以使用ng-app或angular.bootstrap。

如果你有两个模块＆＃34; myApp＆＃34;和＆＃34; loginController＆＃34;就像你在你的应用程序中所做的那样，你必须制作＆＃34; loginController＆＃34; ＆＃34; myApp＆＃34;的依赖关系。＆＃34;对myApp＆＃34;将是您的角度应用程序模块，您可以添加更多依赖项，外部或自定义。

angular.module('myApp', ['loginController', 'ui-router', 'etc'...])

angularjs 1手动bootstrap不起作用

3 个答案: