zoukankan      html  css  js  c++  java
  • AngularJS

    While it’s cool to make a custom element like we did the the previous cast, it’s actually more common to do things like create custom attributes. These attributes are going to add things like behaviors, and we can do so by using restrict “A”. “A” is for attribute, “E” is for element. You can then provide a linking function, which is where you will put whatever the behavior is. We’re just going to alert “I’m working” to the user.

    main.js  
    var app = angular.module("superhero",[])
    app.directive("superman",function(){
    return{
    restrict:"A",
    link:function(){
    alert("I'm working");
    }
    };
    });

    From here, instead of having superman as an element, let’s do a div with superman as an attribute:

    index.html

      

    1 <div ng-app="superhero">
    2 <div superman></div>
    3 </div>

    Now if we refresh, you’ll see the alert saying “I’m working” Another restriction we can use is “C” for class. If we change restrict to “C” and refresh without changing anything, we can see that nothing happens. We need to change the directive from an attribute to a class of the div.

    index.html

       1 <div ng-app="superhero"> 2 <div superman></div> 3 </div> 

    If we refresh now, we’ll see “I’m working” alerted again. The last restriction is “M” for comment. If we change restrict to “M” and create a comment starting with “directive:” and then the name of our directive, refresh, and we’ll see that it works again.

    index.html

      

    1 <div ng-app="superhero">
    2 <!-- directive:superman -->
    3 </div>

    The “M” restriction is used the least often, usually only for backwards compatibility and for passing markup validations. Typically it’s best to add behaviors in attributes so you can stack them.

    We’ll create another attribute directive, call it “flash” and set the linking function to alert “I’m working faster” and change “superman” to alert “I’m working stronger” (Don’t forget to change the “superman” directive’s restriction back to “A”)

    main.js

      

     1 var app = angular.module("superhero",[])
     2 app.directive("superman",function(){
     3 return{
     4 restrict:"A",
     5 link:function(){
     6 alert("I'm working");
     7 }
     8 };
     9 });
    10 app.directive("flash",function(){
    11 return{
    12 restrict:"A",
    13 link:function(){
    14 alert("I'm working");
    15 }
    16 };
    17 });

    Now we should have a div with both “superman” and “flash” as attributes

    index.html

      

    1 <div ng-app="superhero">
    2 <div superman flash></div>
    3 </div>

    If we refresh, we’ll see “I’m working stronger” and then “I’m working faster”

    To recap: “E” is for element, “A” is for attribute, “C” is for class, and “M” is for comment. Attributes are going to be the main ones as far as adding behaviors that get used the most. If you don’t specify the restrict property it will default to “A”

  • 相关阅读:
    Vue1.0学习总结(4)———Vue1.0自定义组件、Vue1.0组件之间的通信、slot的使用
    Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
    Vue1.0学习总结(2)———交互(vue-resoucre的使用)
    Vue1.0学习总结(1)———指令、事件、绑定属性、模板、过滤器
    你需要的是坚定自己
    ES6新增—ES6自带的模块化、ES6新增Promise、ES6新增Generator
    ES6新增—ES6中的对象、面向对象、面向对象的继承、面向对象和继承的应用
    ES6新增—新增循环、箭头函数
    ES6新增—let、const、字符串连接、解构赋值、复制数组
    lucene&solr学习——索引维护
  • 原文地址:https://www.cnblogs.com/lucker/p/3783552.html
Copyright © 2011-2022 走看看