zoukankan      html  css  js  c++  java
  • angular学习之directive

    Angular对directive的定义是一段代码片段,你 可以用它来操作DOM

    使用directive可以实现事件的绑定
    module.directive( "addBookButton", [ 'Book', function( Book ) {
    return {
    restrict: "A",
    link: function( scope, element, attrs ) {
    element.bind( "click", function() {
    Book.addBook( { title: "Star Wars", author: "George Lucas" } );
    });
    }
    }
    }]);

    使用directive可以实现不符合html语义的标签。
    比如
    <tabpanel>
    <panel>子面板1</panel>
    <panel>子面板2</panel>
    </tabpanel>
    实现:
    <html ng-app='app'>
    <body>
    <hello></hello>
    </body>
    <js...>
    </html>
    js:
    var appModule= angular.module('app',[]);
    appModule.directive('hello',function(){
    return{
    restrict:'E',
    template:'<div>Hi here</div>',
    replace:ture
    };
    });

    在return中的声明方式选项
    E 元素:<youcanyoudo title="product"></youcanyoudu>
    A 属性:<div youcanyoudo="product"></div>
    C 样式:<div class="youcanyoudo":product></div>
    M 注释:<!-- directive:youcanyoudo products -->
    如果我们需要替换的HTML标签很长,显然不能用
    拼接字符串的方式来写,这时候我们可以用templateUrl来替代template
    ,从而可以把模板写到一个独立的HTML文件中。

  • 相关阅读:
    phonegap ios插件开发及无限后台运行解决
    iOS JSON解析
    ios上取得设备唯一标志的解决方案
    为iOS7重新设计你的App
    iOS多线程GCD 研究
    自定义用户环境
    启用SELinux保护
    shell编写一个批量添加用户脚本
    shell编写一个判断脚本
    shell使用特殊变量
  • 原文地址:https://www.cnblogs.com/youngercode/p/3866055.html
Copyright © 2011-2022 走看看