zoukankan      html  css  js  c++  java
  • angular学习的一些小笔记(中)之directive

    directive里面的几个配置,上代码就清晰了

    <!DOCTYPE html>
    <html ng-app='app'>
    <head>
        <meta charset='UTF-8'>
        <title>test</title>
        <script type="text/javascript" src='static/plugins/angular.min.js'></script>
    </head>
    <body>
        <my-directive></my-directive>
    </body>
    <script type="text/javascript">
        angular.module('app',[])
        .directive('myDirective',function(){
            return{
                restrict:'E',
                template:'<a href="#">click me</a>'
            };
        })
    </script>
    </html>

    这段代码在浏览器上打开是这样的,

    <my-directive><a href="#">click me</a></my-directive>

    看到吗,directive里面的template在标签的里面,是标签的子元素

    然后再看,在配置一个replace

    <body>
        <a href="#">click me</a>
    
    <script type="text/javascript">
        angular.module('app',[])
        .directive('myDirective',function(){
            return{
                restrict:'E',
                replace:true,
                template:'<a href="#">click me</a>'
            };
        })
    </script>
    </body>

    replace为true的时候可以看到的是原来的自定义标签被template替代了

    要是restrict有两个值,比如上代码

    <body>
      <my-directive></my-directive>
      <div my-directive></div>
    
      <script>
        angular.module('myApp', [])
        .directive('myDirective', function() {
          return {
            restrict: 'AE', // modified line
            template: '<a href="http://google.com">Click me</a>'
          }
        })
      </script>
    
    </body>

    这样的话就会,

    <body>
      <my-directive><a href="http://google.com">Click me</a></my-directive>
      <div my-directive=""><a href="http://google.com">Click me</a></div>
    
      <script>
        angular.module('myApp', [])
        .directive('myDirective', function() {
          return {
            restrict: 'AE', // modified line
            template: '<a href="http://google.com">Click me</a>'
          }
        })
      </script>
    
    
    </body>

    看到了吗,两个里面都有template

  • 相关阅读:
    nodeJS实现完整文件夹结构压缩
    chrome浏览器插件开发
    让用户端JS触发F11全屏
    inline-block和float的共性和区别
    安家落户
    ActiveMQ简单实现之一对一生产和消费
    Centos下 修改mysql密码
    虚拟机centos7 安装was和ihs
    webservice简单实现
    Centos7安装mysql
  • 原文地址:https://www.cnblogs.com/lwwen/p/5992371.html
Copyright © 2011-2022 走看看