84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
指令是angularJs的一个难点吧,到现在还是写不出自己的指令,有什么好的提升建议?
小伙看你根骨奇佳,潜力无限,来学PHP伐。
我说一下我认为周围的同事对directive的误解。大家可能初学directive并在一些网上的教程(其实可能都是这1,2位老师写的)学习的,所以他们都强调:
操作dom要在directive中, 不能用jquery。
这句话, 然而我觉得他们并没有理解这句话, 就像把directive翻译成‘指令’ 很明显directive翻译成指令不算错, 但并没有真的理解directive的意思。
来说说我的理解。directive的作用是对应用的语义化,模块化,提高复用性,便于维护这些作用。 打个比方,用jquery的sortable,
$('#target').sortable(opt);
这就是所谓的使用了jquery。 根据angular的思路, 可能代码是这样的
<p sortable='opt'> <ul> ... </ul> </p>
这样将编码语义化, 直接在dom里说, 这个p我要让他sortable,配置是$scope.opt。 这样就不用设置一个id再去js代码中调用了。这么看来不能使用jquery的意义其实是不要使用选择器放在directive中就可以使用directive的元素了。顺带一提, 加载了jquery的应用中angular.element($elem)于$($elem)是等价的, 并不是不能用jquery什么的。至于什么时候要把一些dom封装成directive,就要看经验了, js代码都是藏不了的, 觉得做得好的网站自己把他的代码拔下来看就是了, 包括主流的, 优秀的angular的ui库等。directive的好不好在于封装合理不合理,<html> <body> <p> <a> <form> 等等其实都是directive,并不是什么都写成directive都是合理的。学习的时候模仿, 然后就看经验了。
<html> <body> <p> <a> <form>
~~~~~分割线~~~~~还是想追加一下,有朋友问是不是angular dom操作比较少, 所以directive比较少。 回答:dom操作是根据需求来的, 一个需求出来了, 无论用什么框架, 这些dom操作都是需要做的。 directive只是让调用dom操作的函数更方便了。
再举个例子:觉得dom操作一定实在directive里的朋友请看 angular-ui的modal框。操作的方式是service, 在service中操作了dom这样也是最合理的, 另外一些通用的提示框, 通知, 也是在service中操作更为合适。 例如:
.controller('someapp', function(alertService, NotificationService){ alertService.error('非法操作'); NotificationService.appendNotice('您有一条新消息'); })
等, 很明显这样的操作在service中更为合适, 如果硬要去每个使用的template中放置一些directive就显得繁琐了。
angular.module('cnodejs.directives').directive( // Collection-repeat image recycling while loading // https://github.com/driftyco/ionic/issues/1742 'resetImg', function ($document) { return { restrict: 'A', link: function($scope, $element, $attributes) { var applyNewSrc = function (src) { var newImg = $element.clone(true); newImg.attr('src', src); $element.replaceWith(newImg); $element = newImg; }; $attributes.$observe('src', applyNewSrc); $attributes.$observe('ngSrc', applyNewSrc); } }; } 这段指令为什么没有模版呢?
我说一下我认为周围的同事对directive的误解。
大家可能初学directive并在一些网上的教程(其实可能都是这1,2位老师写的)学习的,所以他们都强调:
这句话, 然而我觉得他们并没有理解这句话, 就像把directive翻译成‘指令’ 很明显directive翻译成指令不算错, 但并没有真的理解directive的意思。
来说说我的理解。directive的作用是对应用的语义化,模块化,提高复用性,便于维护这些作用。 打个比方,用jquery的sortable,
这就是所谓的使用了jquery。 根据angular的思路, 可能代码是这样的
这样将编码语义化, 直接在dom里说, 这个p我要让他sortable,配置是$scope.opt。 这样就不用设置一个id再去js代码中调用了。
这么看来不能使用jquery的意义其实是不要使用选择器放在directive中就可以使用directive的元素了。
顺带一提, 加载了jquery的应用中angular.element($elem)于$($elem)是等价的, 并不是不能用jquery什么的。
至于什么时候要把一些dom封装成directive,就要看经验了, js代码都是藏不了的, 觉得做得好的网站自己把他的代码拔下来看就是了, 包括主流的, 优秀的angular的ui库等。
directive的好不好在于封装合理不合理,
<html> <body> <p> <a> <form>
等等其实都是directive,并不是什么都写成directive都是合理的。学习的时候模仿, 然后就看经验了。
~~~~~分割线~~~~~
还是想追加一下,有朋友问是不是angular dom操作比较少, 所以directive比较少。 回答:dom操作是根据需求来的, 一个需求出来了, 无论用什么框架, 这些dom操作都是需要做的。 directive只是让调用dom操作的函数更方便了。
再举个例子:觉得dom操作一定实在directive里的朋友请看 angular-ui的modal框。操作的方式是service, 在service中操作了dom这样也是最合理的, 另外一些通用的提示框, 通知, 也是在service中操作更为合适。 例如:
等, 很明显这样的操作在service中更为合适, 如果硬要去每个使用的template中放置一些directive就显得繁琐了。