• 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 属性指向它。

  • 相关阅读:
    🍖流程控制之if判断
    🍖Python开发入门之变量
    🍖Python入门之基本数据类型
    sql事务和存储过程 【转】
    《设计模式基于C#的工程化实现及扩展》 Security Design Pattern 系列 4 角色模式(Role Pattern) 【转】
    C#中ToString格式大全 【转】
    事务日志 (SQL Server)【转】
    批处理启动、停止SQL服务 【转】
    关于HttpContext.Current.Request获取值 【转】
    C#中HashTable的用法 【转】
  • 原文地址:https://www.cnblogs.com/ewqv/p/4910573.html
Copyright © 2020-2023  润新知