个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
我写了一个 AngularJS 指令，但我对此很陌生，我不知道我是否以“Angular 方式”完成了...
这是我的代码:http://plnkr.co/edit/X1tOk4z8f6dCK3mfB7HP?p=preview
html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta charset=utf-8 />
<title>Directive Test</title>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<button id="button1" ng-click="dummyClickFoo()" wait-button="foo"><i></i> Foo</button>
<button id="button2" ng-click="dummyClickBar()" wait-button="bar"><i></i> Bar</button>
</body>
</html>
js:
app = angular.module('app', []);
app.controller('MainCtrl', function($scope) {
$scope.dummyClickFoo = function() {
$scope.startSpinner('foo');
setTimeout(function() {
$scope.stopSpinner('foo');
}, 3000);
};
$scope.dummyClickBar = function() {
$scope.startSpinner('bar');
setTimeout(function() {
$scope.stopSpinner('bar');
}, 3000);
};
});
app.directive('waitButton', function() {
return {
restrict: 'A',
controller: ['$scope', '$element', function($scope, $element) {
$scope.startSpinner = function(id) {
var el = angular.element(document.querySelector('[wait-button="'+id+'"]'));
el.children('i').text('searching...');
};
$scope.stopSpinner = function(id) {
var el = angular.element(document.querySelector('[wait-button="'+id+'"]'));
el.children('i').empty();
};
}]
};
});
我发现 document.querySelector('[wait-button="'+id+'"]') 部分有点“讨厌”……(或者不是？)；否则我不知道在同一个 Controller 中不同时间重复使用同一个指令的更好方法。有人可以建议我更好的代码吗？
谢谢。
最佳答案
我提倡对这种类型的事情使用 link 函数:
link: function($scope, elem, attrs){ /* do something w. elem */ }
在 Controller 中访问您的元素不是很有 Angular 。这就是指令对象的 link 和 compile 函数的全部意义....
...但在极少数情况下这是合理的。 Controller 中注入(inject)的 $element 引用了你的 angular.element(document.querySelector('[wait-button="'+id+'"]'))代码正在做。此时你只需要使用$element。但我可以完全推荐一种更 Angular 方法吗？
另一个问题是您如何基本上将您的意图从指令传达给主 Controller 并返回给指令。您的用例与大多数用例略有不同，因为您具有异步性质。
我做了一个利用隔离作用域和回调参数的示例。在大多数真实场景中，您将处理异步回调的 promise 。因此，我使用 promise 中的 .finally 逻辑来执行回调，该回调与异步逻辑已结束的指令进行通信。
在我的例子中要记住的事情:
link 函数与自定义指令 Controller 时，有一条模糊的界线。$scope 范式。plunker - http://plnkr.co/edit/0AvlCQW5qqkpYKl2WpB3?p=preview
主 Controller
.controller 'MainCtrl', class MainCtrl
@$inject = [
'$scope'
'$interval'
]
constructor: ($scope, @$interval)->
@viewData = 'Skynet 2.0'
@isLoading = false
callbackExample: ($callbackFunc)->
@loadRqst()
.finally -> $callbackFunc?()
loadRqst: ->
@isLoading = 1
# this returns a promise which gets processed in the example functions
@$interval =>
console.log @isLoading++
, 250, 10
.finally =>
@isLoading = false
实现用户界面
<button callback-btn="vc.callbackExample($callbackFunc)">
Callback Example<i> - I'm loading & I'm #1</i>
</button>
<button callback-btn="vc.callbackExample($callbackFunc)">
Callback Example<i> - Look I can load too, I'm #2</i>
</button>
CSS
[callback-btn] i{
display: none;
}
[callback-btn].loading i{
display: initial;
}
.directive 'callbackBtn', ($parse)->
dir =
restrict: 'A'
scope: { callbackBtn: '&' }
link: ($scope, elem, attrs)->
onCallback = ->
console.log 'on callback'
elem.removeClass 'loading'
elem.on 'click', ->
elem.addClass 'loading'
$scope.$apply ->
$scope.callbackBtn({$callbackFunc: onCallback})
关于javascript - 改进 AngularJS 指令代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34229868/
27
4
0
我对编码还比较陌生，但并非完全没有经验。处理有关金融计算器的学校作业。如果你们中的任何人可以查看我的代码以了解不良做法/可能的改进等，那就太好了。 我确实添加了一个“动画”启动(有很多 printf
小目标Trick 论文链接： https://paperswithcode.com/paper/slicing-aided-hyper-inference-and-fine-tuning 代码链接：h
if (firstPositionCpc && (firstPosition > 0 && firstPositionCpc 0 && topOfPageCpc 0 && firstPageCpc
我有 2 个表:“packages”和“items”。 “packages”有以下列:pack_id | item_id “items”有以下列......:item_id |输入 一个包可以有多个
我目前有一个 Pandas Dataframe，我在其中执行列之间的比较。我发现一种情况，在进行比较时存在空列，由于某种原因比较返回 else 值。我添加了一个额外的语句来将其清理为空。看看我是否可以
我正在处理一个查询，通过首先舍入它们的主要日期时间键来连接一个数据库中的多个表。数据库包含来自 openhab 的性能数据，每个表只有一个名为 Time 的主日期时间行和一个名为 Value 的值行。
问候 我有一个程序创建一个类的多个实例，在所有实例上运行相同的长时间运行的 Update 方法并等待完成。我从 this question 开始关注 Kev 的方法将更新添加到 ThreadPool.
我想在下学期的类(class)中取得领先，所以我制作了这个基本版本的 Blackjack 来开始理解 C 的基础知识，我希望您有任何想法可以帮助我更好地理解 C 和其正常的编码实践。 C 中的很多东西
我有一个要求，比如: 给定一个数组，其中包含随机数。需要输出元素出现的次数，有自带解决方案: var myArr = [3,2,1,2,3,1,4,5,4,6,7,7,9,1,123,0,123];
这是我的数据库项目。 表user_ select id, name from user_; id | name ----+---------- 1 | bartek 2 | bartek
我已经完成了一个小批量脚本来调整(动态)一些图像的大小: for a in *.{png,PNG,jpg,JPG,jpeg,JPEG,bmp,BMP} ; do convert "$a" -resiz
是否有更 pythonic 的方法来执行以下代码？我想在一行中完成 parsed_rows 是一个可以返回大小为 3 或 None 的元组的函数。 parsed_rows = [ parse_row(
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improv
下面的代码完成了我想要的，但还有其他更像 python 风格的方式吗？ 文件格式: key1:value1,key2:value2,... key21:value21,key22:value22,..
如果两个英文单词只包含相同的字母，则它们是相似的。例如，food 和 good 不相似，但 dog 和 good 相似。 (如果A与B相似，则A中的所有字母都包含在B中，B中的所有字母都包含在A中。)
我有以下结构来表示二叉树: typedef struct node *pnode; typedef struct node { int val; pnode left; pnode
我有一个区域，它由受约束的 delaunay 三角剖分表示。我正在解决在两点之间寻找路径的问题。我正在使用 Marcelo Kallmann 提供的论文作为解决此问题的引用点。然而，而不是使用 Kal
如果我需要检查文本(字符串)中是否存在单词 A 或单词 B，如果我这样做会有性能差异: if(text.contains(wordA) || text.contains(wordB)) 要使用一些正则
Adjust To 我有上面这个简单的页面，上面有一个标签和一个文本框。我想在文本框中输入文本。 对我有帮助的 XPATH 是 //*[contains(tex
以下伪代码的elisp代码 if "the emacs version is less than 23.1.x" do something else something-else 写成 (if
我是一名优秀的程序员,十分优秀！