zoukankan      html  css  js  c++  java
  • Angular 学习笔记——自定义指令之间的交互

    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script type="text/javascript" src="jquery-1.11.1.js"></script>
        <script src="angular.min.js"></script>
        <script type="text/javascript">
            var m1 = angular.module('myApp',[]);
            m1.directive('hi',function(){
                return {
                    restrict:'AE',
                    replace:'true',
                    transclude:'true',
                    template:'<div><h1 ng-transclude></h1></div>'
                }
            });
    
            m1.directive('hello',function (){
                return{
                    restrict:'AE',
                    template:'<span>title</span>'
                }
            })
        </script>
    </head>
    <body>
        <hi>
            <hello></hello>
        </hi>
    </body>
    </html>
    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    #div1 div,#div2 div{ 200px; height:200px; border:1px red solid; display:none;}
    #div1 input.active , #div2 input.active{ background:red;}
    </style>
    <script src="angular.min.js"></script>
    <script>
    
    var m1 = angular.module('myApp',[]);
    m1.directive('hello',function(){
        return {
            restrict : 'E',   
            replace : true,
            transclude : true,
            controller : function($scope){
                //$scope.name = 'miaov';
                this.name = 'miaov';
                this.show = function(){};
            },
            template : '<div>hello angular<h1 ng-transclude></h1></div>'
        };
    });
    m1.directive('hi',function(){
        return {
            restrict : 'E',   
            replace : true,
            require : '?^hello', 
            template : '<span>hi angular</span>',
            link : function(scope,element,attr,reController){
                console.log( reController );
            }
        };
    });
    
    m1.controller('Aaa',['$scope',function($scope){
        
    }]);
    
    
    </script>
    </head>
    
    <body ng-controller="Aaa">
    <hello>
        <hi></hi>
    </hello>
    </body>
    </html>
  • 相关阅读:
    PHP+MySQL存储数据出现中文乱码的问题
    IE和火狐的css兼容性问题
    JS调用Webservice
    NET-使用Js调用WebService
    ASP.NET 与 Ajax 的实现方式
    未能加载文件或程序集“System.Web.Extensions, Version=1.0.61025.0, Culture=neutral
    c#webservice的简单示例
    HttpRequest Get和Post调用其他页面的方法
    MYSQL 递归操作
    sql with as 用法
  • 原文地址:https://www.cnblogs.com/mayufo/p/5026719.html
Copyright © 2011-2022 走看看