我知道这可能是一个简单的问题,但我在这里感到沮丧,我无法让它发挥作用。我是AngularJS的新手,我正在尝试使用以下条件实现模态对话框(或找到一个):
ng-include
不喜欢<script>
标签。
有一个解决方法(here,here和here),但用text/javascript-lazy
装饰脚本标签的想法是非常臭和脏,更不用说我希望内容HTML是自包含和可执行的,以防它没有加载AngularJS模式对话框的内容。我试过ngDialog
,但问题是容器应该将controller
传递给加载的模板。那不是我想要的。在Bootstrap对话框中,it seems还必须将controller
从父作用域传递到对话框内容。这打破了封装的概念。这是不可取的。而且,它取决于对话结果,这也是不可取的。
我建议使用Angular-UI库。您可以轻松创建任何对话框“Twitter Bootstrap”:
在页面头部包含js。
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap.js"></script>
<script src="/desktop/libs/angular-bootstrap/ui-bootstrap-tpls.js}"></script>
在应用初始化时包含模块。
var Application = A.module('MyApp', [ 'ui.bootstrap', 'ui.bootstrap.modal' ]);
注入日控制器$ modal:
(function (A){
"use strict";
A.module("MyApp").controller("OpenDlg", [ "$scope", "$modal", function($scope, $modal){
$scope.openDlg = function(){
$modal.open({
controller : 'CategoryAddController',
templateUrl : '/admindesktop/templates/category/add/'
}).result.then(function(modalResult){
console.log(modalResult);
});
};
} ]);
}(this.angular));
例如,对话框的简单模板:
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text-center">Создание новой категории</h4>
</div>
<form class="modal-body form-horizontal" name="categoryForm">
<div class="form-group">
<label for="name" class="control-label col-xs-3">Название</label>
<div class="col-xs-9">
<input name='name' type="text" class="form-control" ng-model="category.name" maxlength=50 required ng-required="true"/>
</div>
<div class="row has-error" ng-show="errors.name">
<p ng-repeat="error in errors.name">{{ error }}</p>
</div>
</div>
<div class="container-fluid" ng-show="errors.length > 0">
<div class="row">
<p class="text-center text-danger" ng-repeat="error in errors">{{ error }}</p>
</div>
</div>
</form>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="save()" ng-disabled="categoryForm.$invalid">Сохранить</button>
<button class="btn btn-default" ng-click="cancel()">Отмена</button>
</div>
</div>
主要:模态窗口控制器:
(function(A) {
"use strict";
var app = A.module('MyApp');
app.controller('CategoryAddController', [ '$scope', '$modalInstance', 'Category', 'growl', function($scope, $modalInstance, Category, growl) {
$scope.save = function() {
var category = new Category($scope.category);
category.$save(function() {
growl.success('Категория успешно создана');
$modalInstance.close(true);
}, function(response) {
$scope.errors = response.data;
});
};
$scope.cancel = function() {
$modalInstance.close(false);
};
} ]);
}(this.angular));
我使用Service来改变模态控制器和父范围之间的数据:
(function(A){
"use strict";
A.module("MyApp").service('Storage', function(){
return {
storedData: undefined
};
});
}(this.angular));
在父范围内:
Storage.storedData = ...; //For example, selected row of table
在模态控制器中:
$scope.item = Storage.storedData; //Selected row of table
角度也有特殊的模块类型,value。