问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
all2005
    3.4k40353494

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

    javascriptangularjs
    阅读 1.9k
    2 个回答
    得票最新
    头像
    nujnewnehc
      1.1k32034
      ✓ 已被采纳

      我说一下我认为周围的同事对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就显得繁琐了。

      头像
      all2005
        3.4k40353494
        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);
      }
    };
  }
  这段指令为什么没有模版呢？
        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题