在链接函数中,是否有更多的"Angular"方法将函数绑定到click事件？
现在,我正在......
myApp.directive('clickme', function() {
return function(scope, element, attrs) {
scope.clickingCallback = function() {alert('clicked!')};
element.bind('click', scope.clickingCallback);
} });
这是Angular的做法还是丑陋的黑客行为？也许我不应该这么关心,但我是这个框架的新手,并且想知道"正确"的做事方式,特别是随着框架的推进.
我在控制器中定义的函数与指令中的回调函数绑定时遇到了一些麻烦.我的代码如下所示:
在我的控制器中:
$scope.handleDrop = function ( elementId, file ) {
console.log( 'handleDrop called' );
}
然后我的指示:
.directive( 'myDirective', function () {
return {
scope: {
onDrop: '&'
},
link: function(scope, elem, attrs) {
var myFile, elemId = [...]
scope.onDrop(elemId, myFile);
}
} );
在我的html页面中:
<my-directive on-drop="handleDrop"></my-directive>
上面的代码没有运气.从我在各种教程中阅读的内容中我了解到,我应该在HTML页面中指定参数？
我需要测试事件是否正确发出或广播,并手动触发事件.
最好的方法是什么？
unit-testing javascript-events jasmine angularjs angularjs-directive
在Vojta Jina的优秀存储库中,他演示了指令的测试,他在模块包装器之外定义了指令控制器.请参见:https: //github.com/vojtajina/ng-directive-testing/blob/master/js/tabs.js
这不是不好的做法并污染全局命名空间吗？
如果一个人有另一个地方可以合理地调用TabsController,那会不会打破这些东西？
所提到的指令的测试可以在这里找到:https://github.com/vojtajina/ng-directive-testing/commit/test-controller
是否可以将指令控制器与指令的其余部分分开测试,而无需将控制器放在全局命名空间中？
将整个指令封装在app.directive(...)定义中会很好.
unit-testing jasmine angularjs angularjs-directive karma-runner
我试图编写一个小指令,用其他模板文件包装其内容.
这段代码:
<layout name="Default">My cool content</layout>
应该有这个输出:
<div class="layoutDefault">My cool content</div>
因为布局"默认"具有以下代码:
<div class="layoutDefault">{{content}}</div>
这里是指令的代码:
app.directive('layout', function($http, $compile){
return {
restrict: 'E',
link: function(scope, element, attributes) {
var layoutName = (angular.isDefined(attributes.name)) ? attributes.name : 'Default';
$http.get(scope.constants.pathLayouts + layoutName + '.html')
.success(function(layout){
var regexp = /^([\s\S]*?){{content}}([\s\S]*)$/g;
var result = regexp.exec(layout);
var templateWithLayout = result[1] + element.html() + result[2];
element.html($compile(templateWithLayout)(scope));
});
}
}
});
我的问题:
当我在模板中使用范围变量时(在布局模板中或布局标签内),例如.{{whatever}}它刚开始工作.如果我更新whatever变量,则指令不再更新.整个链接功能只会触发一次.
我认为,AngularJS不知道,该指令使用范围变量,因此不会更新.但我不知道如何解决这个问题.
不知何故,AngularJS中的ng-cloak不起作用.我想在加载页面时隐藏{{}}.因为它看起来很糟糕.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Sample</title>
</head>
<body ng-model="isShow" ng-init="isShow=true">
<p ng-show="isShow"><span ng-cloak>{{ isShow }}</span></p>
<p ng-show="!isShow"><span ng-cloak>{{ isShow }}</span></p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</body>
</html>
是否有更"有棱角"的方式在指令模板中选择DOM元素？例如,假设你有这个指令:
app.directive("myDirective", function() {
return {
template: '<div><ul><li ng-repeat="item in items"></ul></div>',
link: function(scope, element, attrs) {
var list = element.find("ul");
}
}
});
我使用jQuery样式选择器来获取<ul>我的模板中呈现的DOM 元素.有一个更好的方法吗？
在此页面中:http://docs.angularjs.org/guide/directive
指令定义对象
终奌站
如果设置为true,则当前优先级将是将执行的最后一组指令(当前优先级的任何指令仍将执行,因为未定义相同优先级的执行顺序).
我不太懂.什么current priority意思？如果有这样的指令:
请注意directive4有terminal:true和其他人有false.
如果有一个html标签包含所有5个指令:
<div directive1 directive2 directive3 directive4 directive5></div>
5指令的执行顺序是什么？
我正在研究指令的模板.如果作用域中的属性设置为true,data-toggle="dropdown"则应将该属性附加到该元素.如果变量为false,则此数据属性不应呈现为元素的属性.
例如,如果scope变量为true,则模板应呈现:
<span data-toggle="dropdown"></span>
如果为false,则模板应呈现:
<span></span>
模板看起来会是什么样的？
例如,我知道我可以ng-class有条件地使用一个类.如果我想要模板渲染:
<span class="dropdown"></span>
然后我的模板看起来像这样:
"<span ng-class="{ 'dropdown': isDropDown }"></span>
如果范围变量isDropDown是false,则模板将简单地呈现:
<span></span>
所以在模板中有一种方法可以有条件地添加一个class="dropdown".模板的语法是否允许我有条件地添加data-toggle="dropdown"？
我为模板尝试过的一件事是:
"<span data-toggle="{ 'dropdown': isDropDown }"></span>
我对上述模板的思考是,如果范围变量isDropDown为true,则值data-toggle将设置为"dropdown".如果isDropDown为false,那么value data-toggle将只是一个空字符串"".但这似乎不起作用.
我是angularjs的新手.如何在angularjs中检测userAgent.是否可以在控制器中使用它？试过类似下面的东西,但没有运气!
var browserVersion = int((/msie (\d+)/.exec(lowercase(navigator.userAgent)) || [])[1]);
我需要专门检测IE9!
angularjs ×10
jasmine ×2
javascript ×2
unit-testing ×2
angular-ui ×1
karma-runner ×1
ngcloak ×1