首页 > 怎么更好的学习angularJs的指令?

怎么更好的学习angularJs的指令?

指令是angularJs的一个难点吧,到现在还是写不出自己的指令,有什么好的提升建议?


我说一下我认为周围的同事对directive的误解。
大家可能初学directive并在一些网上的教程(其实可能都是这1,2位老师写的)学习的,所以他们都强调:

操作dom要在directive中, 不能用jquery。

这句话, 然而我觉得他们并没有理解这句话, 就像把directive翻译成‘指令’ 很明显directive翻译成指令不算错, 但并没有真的理解directive的意思。

来说说我的理解。directive的作用是对应用的语义化,模块化,提高复用性,便于维护这些作用。 打个比方,用jquery的sortable,

$('#target').sortable(opt);

这就是所谓的使用了jquery。 根据angular的思路, 可能代码是这样的

<div sortable='opt'>
    <ul>
        ...
    </ul>
</div>

这样将编码语义化, 直接在dom里说, 这个div我要让他sortable,配置是$scope.opt。 这样就不用设置一个id再去js代码中调用了。
这么看来不能使用jquery的意义其实是不要使用选择器放在directive中就可以使用directive的元素了。
顺带一提, 加载了jquery的应用中angular.element($elem)于$($elem)是等价的, 并不是不能用jquery什么的。
至于什么时候要把一些dom封装成directive,就要看经验了, js代码都是藏不了的, 觉得做得好的网站自己把他的代码拔下来看就是了, 包括主流的, 优秀的angular的ui库等。
directive的好不好在于封装合理不合理,<html> <body> <div> <a> <form> 等等其实都是directive,并不是什么都写成directive都是合理的。
学习的时候模仿, 然后就看经验了。

~~~~~分割线~~~~~
还是想追加一下,有朋友问是不是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);
      }
    };
  }
  这段指令为什么没有模版呢?
【热门文章】
【热门文章】