我有一个模态窗口,用于向用户呈现表单.他们输入信息然后按下按钮点击按钮.服务器处理请求并发回响应.当响应成功时,我想从控制器关闭模态窗口.怎么能实现这一目标？
模态是部分包含在另一页中
主页:
<!-- main content -->
<p>Foo</p>
<!-- angular directive -->
<foo-directive></foo-directive>
该指令的内容:
<div ng-controller="FooCtrl">
<ul class="thumbnails">
<li class="span3 tile tile-white" ng-repeat="foo in model.foo">
<div>
{{foo.bar}}
</div>
<div>
({{foo.bam}})
</div>
<div>
<a data-toggle="modal" href="#myModal"><img src="{{foo.imgPath}}"></a>
</div>
</li>
</ul>
<!-- foo modal partial included by ejs -->
<% include foo_modal.ejs %>
</div>
模态标记:
<div id="fooModal" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>New Device</h3>
</div>
<div class="modal-body">
<h4>Foo Modal</h4>
<div ng-controller="FooCtrl">
<form name="fooFrm">
<input id="email" …我试图有条件地将指令应用于基于其类的元素.
这是我的问题的一个简单案例,请看这个小提琴的结果.对于这个例子,我使用类名映射到booleans形式的ng-classwith true; 在我的实际情况中,我想使用函数的布尔结果.
标记:
<div ng-app="example">
<div class="testcase">
This will have the directive applied as I expect
</div>
<div ng-class="{'testcase':true}">
This will not have the directive applied but I expect it to
</div>
</div>
JS:
angular.module('example', [])
.directive('testcase', function() {
return {
restrict: 'C',
link: function(scope, element, attrs) {
element.css('color', 'red');
}
}
}
);
为什么指令不适用于div通过它的类ng-class？我是否误解了AngularJS处理指令的顺序？
我应该如何基于对表达式的求值有条件地将指令应用于元素？
我试图通过使用scope变量调用第一个控制器中的第二个控制器的方法.这是我的第一个控制器中的方法:
$scope.initRestId = function(){
var catapp = document.getElementById('SecondApp');
var catscope = angular.element(catapp).scope();
catscope.rest_id = $scope.user.username;
catscope.getMainCategories();
};
我可以设置值,rest_id但我不能getMainCategories因某种原因打电话.控制台显示此错误:
TypeError:Object#没有方法'getMainCategories'
有没有办法调用上面的方法？
编辑:
我使用以下方法同时加载两个应用程序;
angular.bootstrap(document.getElementById('firstAppID'), ['firstApp']);
angular.bootstrap(document.getElementById('secondAppID'), ['secondApp']);
我绝对可以在这里使用服务,但我想知道是否还有其他选择可以做同样的事情!
在启用按钮之前,我需要检查两个条件是否都为真:
这是一个例子:
<button type="submit" ng-disabled="frmUser.pw2.$error.pwMatch" class="btn btn-primary" ng-click="ChangePassword()">Change</button>
此示例仅包含一个条件ng-disabled.我如何添加另一个如范围变量？
为什么在以下示例中,初始渲染值{{ person.name }}不是David？你会如何解决这个问题？
HTML:
<body ng-controller="MyCtrl">
<div contenteditable="true" ng-model="person.name">{{ person.name }}</div>
<pre ng-bind="person.name"></pre>
</body>
JS:
app.controller('MyCtrl', function($scope) {
$scope.person = {name: 'David'};
});
app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
// view -> model
element.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
// model -> view
ctrl.$render = function() {
element.html(ctrl.$viewValue);
};
// load init value from DOM
ctrl.$setViewValue(element.html());
}
};
});
我是一个有角度的新手,我对于角度形式验证指令的工作方式感到磕磕绊绊.
我知道我可以很容易地将指令添加到各个字段,但我正在尝试添加一个验证,它将比较两个表单字段(两者都是模型的元素).
这是一个表单框架:
<form name="edit_form" >
<input name="min" type="number" ng-model="field.min"/>
<input name="max" type="number" ng-model="field.max"/>
</form>
<div class="error" ng-show="edit_form.min.$dirty || edit_form.max.$dirty">
<small class="error" ng-show="(what goes here?)">
Min cannot exceed max
</small>
</div>
总之,我想写一个指令,并用它来显示/隐藏这small.error如果min和max都有值,但min > max.如何访问一个指令中的两个字段？指令是否适合这项工作？
让我们来看看我的指令:
angular.module('main').directive('datepicker', [
function() {
return {
require: '?ngModel',
link: function(scope, element, attributes, ngModel) {
ngModel.$modelValue = 'abc'; // this does not work
// how do I change the value of the model?
那么,我该如何改变ng模型的值呢？
我一直在努力寻找创建模块化,可扩展角度应用程序的最佳方法.我非常喜欢angular-boilerplate,angular-app等项目的结构,其中所有相关文件按部分和指令的特征组合在一起.
project
|-- partial
| |-- partial.js
| |-- partial.html
| |-- partial.css
| |-- partial.spec.js
但是,在所有这些示例中,模板URL相对于基本URL加载,而不是相对于当前文件:
angular.module('account', [])
.config(function($stateProvider) {
$stateProvider.state('account', {
url: '/account',
templateUrl: 'main/account/account.tpl.html', // this is not very modular
controller: 'AccountCtrl',
});
})
这不是非常模块化的,并且可能难以在大型项目中维护.templateUrl每次移动任何这些模块时,我都需要记住改变路径.如果有一些方法可以相对于当前文件加载模板,那将是很好的,如:
templateUrl: './account.tpl.html'
有没有办法在角度做这样的事情？
angularjs angularjs-directive angular-template angular-ui-router
ngIf和之间有什么实际区别ngSwitch？这两个指令都操纵DOM,但ngSwitch更冗长.ngIf除非你需要一些非常大的东西才能使用,这是典型的情况ngSwitch吗？
有一种情况,ngSwitch并ngIf不能直接替代品？或者是他们唯一的实用差异语法？
我正在使用AngularJS和AngularJS指令编写组件.
我正在做这样的事情:
var MyApp = angular.module('MyApp', []);
MyApp.directive('myTag', function() {
return { /* Some logic here*/ }
});
我希望能够改变我的组件的样式(使用CSS),如下所示:
<my-tag class="MyClass"></my-tag>
除此之外,我希望能够操作组件内的所有元素样式(my-tag内的HTML标记).
您是否有任何建议或有用的示例如何使用AngularJS操纵自定义标签的样式属性？