0
私はangularjsを初めて使っています。 1つのjsファイルに2つの異なるモジュールを作成しようとしましたが、それらのモジュールの1つを手動で要素にブートストラップしました。これは、stackoverflowの質問の1つで示唆されました。しかし、これはうまくいきません。 両方のモジュールが独立して動作します。 ここで何がうまくいかないのか分かりません。 は、ここに私のコードです： -angularjs 1手動ブートストラップdoes not work
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>
更新は、角度の行動との最初のdivが働くdemoDiv IDを持つ、すなわちDIV動作しますが、手動でdoesnot –
手段を「動作しない」何を指定する必要がありますブートストラップされる1。しかし、おそらく問題は、ページロードが完了する前に 'angular.bootstrap'が実行されることです。また、複数のブートストラップは一般的な方法ではなく、開発者が自分が何をしているかを知っている場合にのみ使用してください（実際はほとんどありません）。あなたが「新しい角度に慣れている」という事実は、おそらくあなたが間違ったやり方をしていることを示唆しています。 – estus
私の悪い!!!!バインディングは機能しません.2番目のdivは角の振る舞いを示さないので、ブラウザで{{loginMessage}}を取得します。しかし、最初のdivは正常に動作し、角の動作を示します –