javascript - 怎么更好的学习angularJs的指令？-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

伊谢尔伦 2017-04-11 11:30:44

[JavaScript讨论组]

378

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

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(2)

伊谢尔伦2017-04-11 11:32:44 2楼

我说一下我认为周围的同事对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都是合理的。
学习的时候模仿，然后就看经验了。

～～～～～分割线～～～～～
还是想追加一下，有朋友问是不是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就显得繁琐了。

赞 +0

添加回复

怪我咯2017-04-11 11:32:44 1楼

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);
      }
    };
  }
  这段指令为什么没有模版呢？

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>