ディレクティブ角度JS

角度JSカスタムコマンド

オブジェクトを定義するカスタムコマンドの戻り命令：

制限：制約カスタム命令は、フォームを使用制限し、値A（属性）、E（要素）、C（カテゴリ）、M（ノート）を持っています
テンプレート：この属性は、角JS命令を指定するには、テンプレートのHTMLに置き換えられます
範囲：範囲：真の範囲を作成して示し、範囲は、親スコープ（すなわち、コントロールスコープコントローラNG）から継承される
範囲：{}スコープ完全に単離され、任意の親スコープを継承していないを作成しますデータ
範囲：{「@」}のサブスコープの変更データは、親スコープ内のデータを変更しない、結合方法の範囲を作成するデータサブスコープが変更されたデータの親スコープを変更
範囲：{ " =「}双方向結合サブスコープ作成
スコープ：{」＆「}親子スコープスコープとの結合プロセスを作成します
コントローラ：この属性は、命令定義されたメソッドとプロパティ内の命令との間の通信に使用される他の命令によって呼び出されます

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>复习directive</title>
        <script type="text/javascript" src="../js/angular.js"></script>
    </head>
    <body ng-controller="myController">
        <h4>父作用域:{{message}}</h4>
        <input type="text" ng-model="message" />
        <h4>子作用域:</h4>
        <h4>scope={}时，子作用域和父作用域完全隔离</h4>
        <div my-directive></div>
        <h4>scope={"="}的时候，实现子作用域与父作用域的双向数据绑定</h4>
        <div my-directive1 message="message"></div>
        <h4>scope={"@"}时，实现子作用域和父作用域的单向数据绑定，
            <br/>父作用域值的改变会影响子作用域，子作用域不会影响父作用域</h4>
        <div my-directive2 message={{message}}></div>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myController", function($scope){
                $scope.message = "father info"
            });
            app.directive("myDirective", function(){
                return {
                    restrict: "A",
                    scope: {
                    },
                    template: "<div ng-init=\"message='child info'\">child message:{{message}}<br /><input type='text' ng-model='message'/></div>"
                };
            });
            app.directive("myDirective1", function(){
                return {
                    restrict: "A",
                    template: "<div>child message:{{message}}<br /><input type='text' ng-model='message'/></div>",
                    scope: {
                        message: "="
                    }
                }
            });
            app.directive("myDirective2", function(){
                return{
                    retrict: "A",
                    template: "<div>child message:{{message}}<br/><input type='text' ng-model='message'/></div>",
                    scope: {
                        message: "@"
                    }
                }
            });
        </script>
    </body>
</html>

角度JSカスタムコマンド

オブジェクトを定義するカスタムコマンドの戻り命令：

おすすめ