AngulatJS $directive

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_30896511

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量48

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lihaozhou/p/3675474.html

版权

$directive()方法包含2个参数

1 name 视图中的元素

2 function 决定directive怎样的作用，返回一个object

restrict : E/A/C/M 绑定元素的类型 E element A attribute C class M comment

priority:如果同一个元素绑定2个directive，那么可以在这里设置优先级

terminal：boolean 更高优先级的directive会被停止，同等优先级的会被执行

template: 返回的string

replace :是否去掉外层wrap

controller 内置的控制器

简单例子：

<!DOCTYPE html>

<html ng-app="demo">
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
    <div my-Directive></div>
</body>
<script>
    var demo = angular.module("demo", []);
    demo.controller("demoController", function ($scope) {

    });
    demo.directive("myDirective", function () {
        return {
            restrict: "A",
            replace: true,
            controller: function ($scope) {
                $scope.name = "click me";
            },
            template: "<a href='http://google.com'>{{name}}</a>"
        };
    });
</script>
</html>

directive 与DOM交互的理解可以通过scope来传递

<!DOCTYPE html>

<html ng-app="demo">
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
    <div my-Directive my-Url="http://google.com" my-Text="click me"></div>
</body>
<script>
    var demo = angular.module("demo", []);
    demo.controller("demoController", function ($scope) {

    });
    demo.directive("myDirective", function () {
        return {
            restrict: "A",
            replace: true,
            controller: function ($scope) {
                //$scope.name = "click meee";
            },
            scope:{
                myUrl:"@",
                myText:"@"
            },
            template: "<a href='{{myUrl}}'>{{myText}}</a>"
        };
    });
</script>
</html>

再看另外一个例子

<!DOCTYPE html>

<html ng-app="demo">
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body>
    <input type="text" ng-model="theirUrl" />
    <div my-Directive my-Url="http://google.com" my-Text="click me" some-Attr="theirUrl"></div>
</body>
<script>
    var demo = angular.module("demo", []);
    demo.controller("demoController", function ($scope) {

    });
    demo.directive("myDirective", function () {
        return {
            restrict: "A",
            replace: true,
            controller: function ($scope) {
                //$scope.name = "click meee";
            },
            scope:{
                myUrl:"=someAttr",//modified
                myText:"@"
            },
            template: "<a href='{{myUrl}}'>{{myText}}</a>"
        };
    });
</script>
</html>

用theirUrl将some-Attr关联起来，通过scope传递值进去directive

transclude

是否继承dom里面的元素 true继承

<!DOCTYPE html>

<html>
<head>
    <title></title>
    <script src="angular.min.js" type="text/javascript"></script>
</head>
<body ng-app="demo" ng-controller="demoController">
    
    <div  my-Directive title="slidebox">
        <ul>
            <li>first link</li>
            <li>second link</li>
        </ul>
    </div>
</body>
<script>
    var demo = angular.module("demo", []);
    demo.controller("demoController", function ($scope) {
        //$scope.DirectiveTest = "DirectiveTestcc";
    });
    demo.directive("myDirective", function () {
        return {
            restrict: "EA",
            transclude: false,
            scope: {
                title:"@"
            },
            template: "<div class='{{title}}' ng-transclude></div>"
        };
    });
</script>
</html>

注意点为template里要加上ng-transclude.. 同类可对比replace:是否覆盖外层的wrap

controller

 controller: function ($scope, $element, $attrs, $transclude) {
                $scope.cls = $attrs.class; //拿到属性class的值 $attrs是一个object
                //$element 代表该元素
                //$transclude ??
}

controllerAs

　　直接加上外面的controller 就可以内部使用

转载于:https://www.cnblogs.com/lihaozhou/p/3675474.html

weixin_30896511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngulatJS $directive

$directive()方法包含2个参数1 name 视图中的元素2 function 决定directive怎样的作用，返回一个objectrestrict : E/A/C/M 绑定元素的类型 E element A attribute C class M commentpriority:如果同一个元素绑定2个directive，那么可以在这里设置优先级terminal...
复制链接

扫一扫