码迷，mamicode.com
首页 > Web开发 > 详细

AngularJS 风谲云诡的指令

时间：2016-06-12 01:53:24      阅读：272      评论：0      收藏：0      [点我收藏+]

标签：

学习要点：

  • 定义复杂的指令
  • 指令模板
    • 使用函数作为模板
    • 使用外部模板
    • 动态引入外部模板
    • 替换元素
  • 管理指令的作用域
    • 创建多个控制器
    • 给每个指令实例创建自己的作用域
    • 创建隔离的作用域

引子：
前面我们简单地介绍了NG 指令的简单用法，但是这有时并不能满足我们的要求，其实指令用起来还是很复杂的，接下来让我们看看这风谲云诡的指令如何兴风作浪！

一、定义复杂的指令
定义一个复杂的指令，我们需要在工厂函数中返回一个对象，这个对象需要我们使用一些指令，下面基本涵盖了，我们在使用的时候介绍他们的作用和用法：
技术分享
接下来，我们利用link和restrict属性来讲解一个返回链式函数的指令


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="defaultCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div class="panel-body">
            <!-- 指令当作元素 -->
            <!-- <unorderlist list-source="products" list-property="price | currency"/> -->
            <!-- 指令当作属性 -->
            <div unorderlist="products" list-source="products" list-property="price | currency"></div>
        </div>
    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>

<script type="text/javascript">

angular.module("exampleApp", [])
    .directive("unorderlist", function () {
        return {
            // link : 为指令指定连接函数
            link: function (scope, element, attrs) {
                var data = scope[attrs["unorderlist"] || attrs["listSource"]];
                var propertyExpression = attrs["listProperty"] || "price | currency";
                if (angular.isArray(data)) {
                    var listElem = angular.element("<ul>");
                    if (element[0].nodeName == "#comment") {
                        element.parent().append(listElem);
                    } else {
                        element.append(listElem);
                    }
                    for (var i = 0; i < data.length; i++) {
                        listElem.append(angular.element("<li>").text(scope.$eval(propertyExpression, data[i])));
                    }
                }
            },
            // restrict : 指定指令如何使用 ECMA 元素、类、注释和属性, 类和注释一般不用
            restrict : "ECMA"
        }
    })
    .controller("defaultCtrl", function ($scope) {
        $scope.products = [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
        ];

    })
</script>
</body>
</html>

定义的unorderlist指令返回一个水果列表，里面的逻辑我们在上一个已经详细讲解了【 AngularJS 优雅的自定义指令】 ，这里不再累赘
技术分享

二、使用指令模板
1.使用字符串作为模板
我们需要修改定义指令部分，即Module.directive部分，其他不变。

angular.module("exampleApp", [])
    .directive("unorderlist", function () {
        return {
            // link : 为指令指定连接函数
            link: function (scope, element, attrs) {
                // attrs[‘unorderlist‘] 获取unorderlist属性值，这里为products
                // 获取数据模型值，这里为scope.products，并且将其赋值给scope.data
                scope.data = scope[attrs["unorderlist"] || attrs["listSource"]];
            },
            // template : 指定一个将插入HTML的模板的指令
            template : "<ul><li ng-repeat=‘item in data‘>{{item.price | currency}}</li></ul>",
            // restrict : 指定指令如何使用 ECMA 元素、类、注释和属性, 类和注释一般不用
            restrict : "EA"
        }
    })

2.使用函数作为模板


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="defaultCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div class="panel-body">
            <!-- 指令当作元素 -->
            <!-- <unorderlist list-source="products" list-property="price | currency"/> -->
            <!-- 指令当作属性 -->
            <div unorderlist="products" list-source="products" list-property="price | currency"></div>
        </div>
    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 定义模板 -->
<script type="text/template" id="tplList">
    <ul>
        <li ng-repeat="item in data">
            {{item.price | currency}}
        </li>
    </ul>
</script>
<script type="text/javascript">
angular.module("exampleApp", [])
    .directive("unorderlist", function () {
        return {
            // link : 为指令指定连接函数
            link: function (scope, element, attrs) {
                // attrs[‘unorderlist‘] 获取unorderlist属性值，这里为products
                // 获取数据模型值，这里为scope.products，并且将其赋值给scope.data
                scope.data = scope[attrs["unorderlist"] || attrs["listSource"]];
            },
            // template : 指定一个将插入HTML的模板的指令
            // 使用函数
            template : function () {
                return angular.element(document.querySelector("#tplList")).html();
            },
            // restrict : 指定指令如何使用 ECMA 元素、类、注释和属性, 类和注释一般不用
            restrict : "EA"
        }
    })
    .controller("defaultCtrl", function ($scope) {
        $scope.products = [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
        ];

    })
</script>
</body>
</html>

上述代码使用到了jqLite，我们应该尽量避免使用DOMAPI
3.使用外部模板
第一步：
我们先定义一个外部模板文件，这里我们叫做tableTpl.html

<table>
    <thead><th>Name</th><th>Price</th></thead>
    <tbody>
        <tr ng-repeat="item in data">
            <td>{{item.name}}</td>
            <td>{{item.price | currency}}</td>
        </tr>
    </tbody>
</table>

接下来，我们再定义一个外部模板文件，这里我们叫做itemTpl.html

<p>This is the list from the template file</p>
<ul>
    <li ng-repeat="item in data">{{item.price | currency}}</li>
</ul>

第二步：我们来动态引用



<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="defaultCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div class="panel-body">
            <!-- 指令当作元素 -->
            <!-- <unorderlist list-source="products" list-property="price | currency"/> -->
            <!-- 指令当作属性 -->
            <div unorderlist="products" template="table"></div>
        </div>
    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<!-- 定义模板 -->
<script type="text/template" id="tplList">
    <ul>
        <li ng-repeat="item in data">
            {{item.price | currency}}
        </li>
    </ul>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("unorderlist", function () {
        return {
            // link : 为指令指定连接函数
            link: function (scope, element, attrs) {
                // attrs[‘unorderlist‘] 获取unorderlist属性值，这里为products
                // 获取数据模型值，这里为scope.products，并且将其赋值给scope.data
                scope.data = scope[attrs["unorderlist"] || attrs["listSource"]];
            },
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            templateUrl : function (elem, attrs) {
                return attrs[‘template‘] == ‘table‘ ? "tableTpl.html" : "itemTpl.html";
            },
            // restrict : 指定指令如何使用 ECMA 元素、类、注释和属性, 类和注释一般不用
            restrict : "EA"
        }
    })
    .controller("defaultCtrl", function ($scope) {
        $scope.products = [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
        ];

    })
</script>
</body>
</html>

技术分享
上面我们看到了，template属性决定着引入的文件

4.替换元素
默认情况下，我们在模板中添加样式类，但是显示效果并不是我们所想象的那样好，我们需要使用替换技术。所谓替换，就是用模板文件代替使用指令的元素，并且将使用指令的元素的属性都赋值给模板元素。


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="defaultCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div class="panel-body">
            <!-- 指令当作元素 -->
            <!-- <unorderlist list-source="products" list-property="price | currency"/> -->
            <!-- 指令当作属性 -->
            <div unorderlist="products" template="table" class="table table-striped"></div>
        </div>
    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("unorderlist", function () {
        return {
            // link : 为指令指定连接函数
            link: function (scope, element, attrs) {
                // attrs[‘unorderlist‘] 获取unorderlist属性值，这里为products
                // 获取数据模型值，这里为scope.products，并且将其赋值给scope.data
                scope.data = scope[attrs["unorderlist"] || attrs["listSource"]];
            },
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            templateUrl : function (elem, attrs) {
                return attrs["template"] == "table" ? "tableTpl.html" : "itemTpl.html";
            },
            // restrict : 指定指令如何使用 ECMA 元素、类、注释和属性, 类和注释一般不用
            restrict : "EA",
            // 指定模板元素是否替换指令所应用到的元素
            replace : true,
        }
    })
    .controller("defaultCtrl", function ($scope) {
        $scope.products = [
            { name: "Apples", category: "Fruit", price: 1.20, expiry: 10 },
            { name: "Bananas", category: "Fruit", price: 2.42, expiry: 7 },
            { name: "Pears", category: "Fruit", price: 2.02, expiry: 6 }
        ];

    })
</script>
</body>
</html>

解析：
第一步：在应用指令的元素中加上修饰类
第二步：在JS中加上replace属性
技术分享

三、管理指令的作用域

先看看一个例子：


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div scope-dome></div>
        <div scope-dome></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : "<div class=‘panel-body‘>Name: <input ng-model=name /></div>",

        }
    })
    .controller("scopeCtrl", function ($scope) {

    })


</script>
</body>
</html>

技术分享
例子中同时使用了两个一样的模板，由于两个元素的作用域一种，使用的元素一致，双向绑定的数据name一致，导致当你输入字符时，两个输入框元素同步
下面是原理图（一个指令的不同实例在同一个控制器作用域的操作）：
技术分享

1.建立多个控制器
对于上述的问题，我们想要消除同步的问题，需要建立多个控制器，这里彼此的数据绑定name就独立了，因为每个元素都是不同的控制器，即作用域不同，所以不会同步了


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div ng-controller="firstCtrl" scope-dome></div>
        <div ng-controller="secondCtrl" scope-dome></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : "<div class=‘panel-body‘>Name: <input ng-model=name /></div>",

        }
    })
    .controller("firstCtrl", function ($scope) {

    })
    .controller("secondCtrl", function ($scope) {

    })

</script>
</body>
</html>

解析：
第一步：同时创建了两个控制器，即firstCtrl和secondCtrl
第二步：在调用指令时，应用于不同的控制器
技术分享
下面是原理图（为指令的每个实例创建一个控制器）：
技术分享

2.给每个指令实例创建自己的作用域
其实，我们可以避免创建那么多控制器，可以使用scope属性来为每个指令实例创建自己的作用域


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div ng-controller="firstCtrl" scope-dome></div>
        <div ng-controller="secondCtrl" scope-dome></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : "<div class=‘panel-body‘>Name: <input ng-model=name /></div>",
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : true,
        }
    })

</script>
</body>
</html>

3.创建隔离作用域


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div scope-dome></div>
        <div scope-dome></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <p>Name: <input ng-model="data.name" /></p>
        <p>City: <input ng-model="city" /></p>
        <p>Country: <input ng-model="country" /></p>
    </div>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : function () {
                return angular.element(document.querySelector("#scopeTemplate")).html();
            },
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : true,
        }
    })
    .controller("scopeCtrl", function ($scope) {
        // 共享
        $scope.data = { name : "Tom"};
        // 独立
        $scope.city = "BeiJing";
    })
</script>
</body>
</html>

这个例子中data.name共享，city独立
技术分享
使用scope的优点是可以省去许多控制器，缺点是它还是要受到控制的影响的，例如本例子中的scopeCtrl控制器，那么我们怎么避免呢？
就是用隔离控制器，直接隔离了指令模板与控制器的关系
下面是原理图（隔离作用域的效果）：
技术分享


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <div scope-dome></div>
        <div scope-dome></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <p>Name: <input ng-model="data.name" /></p>
        <p>City: <input ng-model="city" /></p>
        <p>Country: <input ng-model="country" /></p>
    </div>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : function () {
                return angular.element(document.querySelector("#scopeTemplate")).html();
            },
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : {},

        }
    })
    .controller("scopeCtrl", function ($scope) {
        $scope.data = { name : "Tom"};
        $scope.city = "BeiJing";
    })
</script>
</body>
</html>

这样，隔离控制器的指令元素不再受影响了
技术分享

1.单向数据绑定


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <!-- 本地作用域数据与scopeCtrl作用域数据绑定 -->
        <div scope-dome nameprop="{{data.name}}"></div>
        <div scope-dome nameprop="{{data.name}}"></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <!-- 使用本地作用域数据 -->
        <p>Name: <input value="{{local}}" /></p>
    </div>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : function () {
                return angular.element(document.querySelector("#scopeTemplate")).html();
            },
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : {
                // 隔离的本地作用域
                local : "@nameprop"
            },

        }
    })
    .controller("scopeCtrl", function ($scope) {
        $scope.data = { name : "Tom"};
        $scope.city = "BeiJing";
    })
</script>
</body>
</html>

在一开始两个输入框都获取了scopeCtrl作用域的data.name的值，但是两个输入框都是隔离作用域的，所有他们修改值时，不会影响其他的值
技术分享

2.双向数据绑定


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <!-- 本地作用域数据与scopeCtrl作用域数据绑定 -->
        <div scope-dome nameprop="data.name"></div>
        <div scope-dome nameprop="data.name"></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <!-- 使用本地作用域数据 -->
        <p>Name: <input ng-model="local" /></p>
    </div>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : function () {
                return angular.element(document.querySelector("#scopeTemplate")).html();
            },
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : {
                // 隔离的本地作用域
                local : "=nameprop"
            },

        }
    })
    .controller("scopeCtrl", function ($scope) {
        $scope.data = { name : "Tom"};
        $scope.city = "BeiJing";
    })
</script>
</body>
</html>

一共做出了三处修改
第一：将指令中local 的@nameprop 改为 =nameprop
第二：将模板中的{{local}} 改为 ng-model=”local”
第三：将视图中的 nameprop = {{data.name}} 改为 nameprop = “data.name”
这样数据又同步了，牵一发而动全身
技术分享

3.使用函数表达式


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <!-- 本地作用域数据与scopeCtrl作用域数据绑定 -->
        <div scope-dome nameprop="data.name" city="getCity(data.name)"></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <!-- 使用本地作用域数据 -->
        <P>Name: {{local}}, City : {{cityFn()}}</P>
    </div>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : function () {
                return angular.element(document.querySelector("#scopeTemplate")).html();
            },
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : {
                // 隔离的本地作用域
                local : "=nameprop",
                cityFn : "&city"
            },

        }
    })
    .controller("scopeCtrl", function ($scope) {
        $scope.data = { name : "Tom"};
        $scope.city = "BeiJing";
        $scope.getCity = function (name) {
            console.log(name);
            return name == "Tom" ? $scope.city : "Unknow";
        }
    })
</script>
</body>
</html>

技术分享

4.直接用隔离作用域的数据来计算一个表达式


<!DOCTYPE>
<!-- use module -->
<html ng-app="exampleApp">
<head>
    <title>Angluar test</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
</head>
<body>
    <dlv class="panel panel-default" ng-controller="scopeCtrl">
        <div class="panel-heading">
             <h3>Products</h3>
        </div>
        <!-- 本地作用域数据与scopeCtrl作用域数据绑定 -->
        <div scope-dome nameprop="data.name" city="getCity(nameValue)"></div>

    </dlv>

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/ng-template" id="scopeTemplate">
    <div class="panel-body">
        <!-- 使用隔离作用域的数据 -->
        <P>Name: {{local}}, City : {{cityFn({nameValue : local})}}</P>
    </div>
</script>
<script type="text/javascript">


angular.module("exampleApp", [])
    .directive("scopeDome", function () {
        return {
            // templateUrl : 指定一个将插入HTML的外部模板的指令
            template : function () {
                return angular.element(document.querySelector("#scopeTemplate")).html();
            },
            // scope : 为指令创建一个新的作用域或者是隔离的作用域
            scope : {
                // 隔离的本地作用域
                local : "=nameprop",
                cityFn : "&city"
            },

        }
    })
    .controller("scopeCtrl", function ($scope) {
        $scope.data = { name : "Tom"};
        $scope.city = "BeiJing";
        $scope.getCity = function (name) {
            console.log(name);
            return name == "Tom" ? $scope.city : "Unknow";
        }
    })
</script>
</body>
</html>

AngularJS 风谲云诡的指令

标签：

原文地址：http://blog.csdn.net/super_yang_android/article/details/51638792
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！