Javascript 为什么Angularjs引导模式没有打开？
我的angularjs引导模式未打开Javascript 为什么Angularjs引导模式没有打开？,javascript,jquery,angularjs,twitter-bootstrap,angularjs-ui-utils,Javascript,Jquery,Angularjs,Twitter Bootstrap,Angularjs Ui Utils,我的angularjs引导模式未打开 var-app=angular.module（'test'，['ui.bootstrap']）； app.controller（'ModalDemoCtrl'，函数（$scope，$log，$modal）{ $scope.user={ 用户：“名称”， 密码：null， 注：空 }; $scope.open=函数（）{ $modal.open({ templateUrl:'myModalContent.html'，//加载模板 background:tru
var-app=angular.module（'test'，['ui.bootstrap']）；
app.controller（'ModalDemoCtrl'，函数（$scope，$log，$modal）{
$scope.user={
用户：“名称”，
密码：null，
注：空
};
$scope.open=函数（）{
$modal.open({
templateUrl:'myModalContent.html'，//加载模板
background:true，//设置background允许我们在模式窗口外单击关闭模式窗口
windowClass:'模态'，//windowClass-要添加到模态窗口模板的其他CSS类
控制器：函数（$scope、$modalInstance、$log、user）{
$scope.user=用户；
$scope.submit=函数（）{
$log.log（'提交用户信息'）；//类似于控制台记录此语句
$log.log（用户）；
$modalInstance.DISCLISE（'cancel'）；//DISCLISE（REASURE）-一种可用于解除模态并传递原因的方法
}
$scope.cancel=函数（）{
$modalInstance.disclose（'cancel'）；
};
},
决心：{
用户：函数（）{
返回$scope.user；
}
}
})；//modal.open的结尾
}；//作用域结束。打开函数
});
我是模态的！
用户名
密码
添加一些注释
取消
打开我！
从模式中选择：{{selected}
在js部分：
将这两个文件放在单独的文件夹中，并确保正确加载js。
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
在HTML中：
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
我是模态的！
用户名
密码
添加一些注释
取消
打开我！
从模式中选择：{{selected}
在js部分：
将这两个文件放在单独的文件夹中，并确保正确加载js。
angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.user = {
user: 'name',
password: null,
notes: null
};
$scope.open = function () {
$modal.open({
templateUrl: 'myModalContent.html', // loads the template
backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window
windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template
controller: function ($scope, $modalInstance, $log, user) {
$scope.user = user;
$scope.submit = function () {
$log.log('Submiting user info.'); // kinda console logs this statement
$log.log(user);
$modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
user: function () {
return $scope.user;
}
}
});//end of modal.open
}; // end of scope.open function
};
在HTML中：
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>I'm a modal!</h3>
</div>
<form ng-submit="submit()">
<div class="modal-body">
<label>User name</label>
<input type="text" ng-model="user.user" />
<label>Password</label>
<input type="password" ng-model="user.password" />
<label>Add some notes</label>
<textarea rows="4" cols="50" ng-model="user.notes">
</textarea>
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<input type="submit" class="btn primary-btn" value="Submit" />
</div>
</form>
</script>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
</body>
</html>
我是模态的！
用户名
密码
添加一些注释
取消
打开我！
从模式中选择：{{selected}
实际上我不是故意的。你正在使用ui-bootstrap-tpls-0.6.0.js。在plunker中使用此js版本以及您的代码按预期运行。但是如果您使用而不是Man，请检查js的js优先级实际上我不是故意的。您使用的是ui-bootstrap-tpls-0.6.0.js。在plunker中使用此js版本以及您的代码可以按预期运行。但是如果您使用而不是Man，请检查js的js优先级