zoukankan      html  css  js  c++  java
  • AngularJS创建新指令

    指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。

    AngularJS原有的指令

    ng-init   初始化指令

    ng-if   条件指定

    ng-repeat   循环指令

    等等指令。

    原有的指令会单独有一篇文章来说明 

    下面为大家介绍下创建新指令的方法

    加入html代码

    <div ng-app="myapp">
    <hello-world></hello-world>
    <div hello-world></div>
    <div data-hello-world></div>
    <div x-hello-world></div>
    </div>

    加入js代码,在渲染ng-app之前。如果不是动态加载angularjs则,把js代码写在html代码前。如果是动态加载angularjs则加在angular.bootstrap(document.body,["myapp"])前面。

    angular.module('myapp', []).directive("helloWorld", function () {
            return {
                restrict: "AE",
                replace: true,
                template: "<div>HelloWorld</div>"
            };
        });

    在上面的代码中,app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。如果你的指令依赖于其他的对象或者服务,比如 $rootScope, $http, 或者$compile,他们可以在这个时间被注入。这个指令在HTML中以一个元素使用,如下:

    <hello-world></hello-world>或<div hello-world></div>

    也可以在元素前加上data-或x-,这两个为html5标准

    <div x-hello-world></div>或<div data-hello-world></div>

    这四种写法都能正常渲染.

    而angularjs在匹配指令的时候,会把字符串转换成驼峰(camelCase)表现形式,然后再与注册过的指令进行匹配。

    这是为什么,我们在HTML中以 hello-world 的方式使用 helloWorld 指令。

    我们在指令定义过程中使用了三个属性来配置指令。

    restrict – 这个属性用来指定指令在HTML中如何使用(还记得之前说的,指令的四种表示方式吗)。在上面的例子中,我们使用了 ‘AE’。所以这个指令可以被当作新的HTML元素或者属性来使用。如果要允许指令被当作class来使用,我们将 restrict 设置成 ‘AEC’,即如果用刚刚的

    angular.module('myapp', []).directive("helloWorld", function () {
            return {
                restrict: "AEC",
                replace: true,
                template: "<div>HelloWorld</div>"
            };
        });

    则<div class="hello-world"></div>也能正常渲染.

    replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们的例子中,我们用 <hello-world></hello-world>的方式使用我们的指令,并且将 replace 设置成 true。所以,在指令被编译之后,生成的模板内容替换掉了 <hello-world></hello-world>。最终的输出是"<div>HelloWorld</div>",如果你将 replace 设置成 false,也就是默认值,那么生成的模板会被插入到定义指令的元素中。

    template – 这个属性规定了指令被Angular编译和链接(link)后生成的HTML标记。这个属性值不一定要是简单的字符串。template 可以非常复杂,而且经常包含其他的指令,以及表达式({{ }})等。更多的情况下你可能会见到 templateUrl, 而不是 template。所以,理想情况下,你应该将模板放到一个特定的HTML文件中,然后将 templateUrl 属性指向它。

  • 相关阅读:
    Balanced Binary Tree
    Swap Nodes in Pairs
    Reverse Nodes in k-Group
    Reverse Linked List II
    Remove Nth Node From End of List
    Remove Duplicates from Sorted List II
    Remove Duplicates from Sorted List
    Partition List
    Merge Two Sorted Lists
    【Yii2.0】1.2 Apache检查配置文件语法
  • 原文地址:https://www.cnblogs.com/ewqv/p/4910573.html
Copyright © 2011-2022 走看看