AngulatJS $directive

時間 2019-11-20

標籤 angulatjs directive 简体版

原文原文鏈接

$directive()方法包含2個參數javascript

1 name 視圖中的元素html

2 function 決定directive怎樣的做用，返回一個objectjava

restrict : E/A/C/M 綁定元素的類型 E element A attribute C class M commentapp

priority:若是同一個元素綁定2個directive，那麼能夠在這裏設置優先級dom

terminal：boolean 更高優先級的directive會被中止，同等優先級的會被執行ide

template: 返回的stringgoogle

replace :是否去掉外層wrapspa

controller 內置的控制器rest

簡單例子：code

<!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 就能夠內部使用

1. [Angular Directive] Structure directive and
2. [AngularJS] Directive. 2 Useful directive
3. directive
4. Angularjs - directive
5. Angular--Directive
6. angular directive
7. directive ngSwitch
8. angularJS中directive與directive 之間的通訊
9. 【angularJS】Directive指令
10. Angular directive&&Vue component
更多相關文章...
• ionic 列表操作 - ionic 教程

相關標籤/搜索

angulatjs

directive

directive&&vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。