angular1.x的directive

最新推荐文章于 2024-02-20 14:10:51 发布

han_hanker

最新推荐文章于 2024-02-20 14:10:51 发布

阅读量900

点赞数

分类专栏： angularjs 文章标签： angular

angularjs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

转载于： http://damoqiongqiu.iteye.com/blog/1917971

学习directive

<body ng-app="app" ng-controller="MainCtrl">
    <my-directive></my-directive>
</body>

如上图上面自定义标签是无效的。我们要自定义它

指令的作用：实现语义化标签

template && restrict

<script type="text/javascript">
    app = angular.module('app', []);

    app.controller('MainCtrl', function($scope) {      
    });

    app.directive('myDirective', function() {

        return {
            restrict: 'ECMA',
            template: '<p> this is directive</p>'
        }

    });
</script>

对于以上代码里面的标签，浏览器显然是不认识的，它唯一能做的事情就是无视这个标签。那么，为了让浏览器能够认识这个标签，我们需要使用Angular来定义一个hello指令（本质上说就是自己来把这种玩意儿替换成浏览器能识别的那些标准HTML标签）。

上面的注意点：
restrict: 指令声明方法
这里写图片描述
template: 渲染的元素
如果我们需要替换的HTML标签很长，显然不能用拼接字符串的方式来写，这时候我们可以用templateUrl来替代template，从而可以把模板写到一个独立的HTML文件中

transclude

<my-directive>
        <span>这是原来的文字</span><br/>
        <p>这是原来的文字</p><br/>
        <div>这是原来的文字</div><br/>

    </my-directive>

<script type="text/javascript">
    app = angular.module('app', []);

    app.controller('MainCtrl', function($scope) {      
    });

    app.directive('myDirective', function() {

        return {
            restrict: 'ECMA',
            transclude: true,
            template: '<p> this is <span ng-transclude></span> directive </p>'
        }

    });
</script>

这里写图片描述

上面的注意点：
要利用这种写法需要设置transclude: true
上面可以看到 <my-directive>还是存在的，如果不想他出现可以加replace:true

scope

当你想要写一个可重复使用的 directive，不能再依赖父 scope，这时候就需要使用隔离 scope 代替。共享 scope 可以直接共享父 scope，而隔离 scope 无法共享父scope

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body ng-app='app'>
    <div ng-controller='myCtrl'>
        <my-directive> <span>原来的文字</span></my-directive>
    </div>
</body>
</html>
<script type="text/javascript" src="js/angular-1.5.0.min.js"></script>
<script type="text/javascript">
    var app = angular.module('app',[]);
    app.controller('myCtrl',['$scope', function($scope){
        $scope.name = 'hanker';
    }]);
    app.directive('myDirective', function(){
        return {
            restrict: 'ECMA',
            template: '<p>xxxxx {{name}} xxxx<span ng-transclude></span>xxxxxxxxx</p>',
            transclude: true,
            replace: true,
            scope: {},
        }
    });

</script>