14.AngularJSにおけるカスタム命令処理

6894 ワード

キーワード:directive

命令の役割ドメイン:デフォルトでは、サブコントローラと親コントローラは同じ$scopeを使用します.つまり、サブコントローラの$scopeは、親コントローラを上書きできる$scopeの付与

です.

サブコントロールにscope:trueを追加すると、役割ドメインは上書きされず、独立して役割ドメインが作成されます.

サブコントローラで使用される属性の1つが親コントローラで定義されている場合、サブコントローラで定義されていません.scope:trueが追加されても、親コントローラのデータが使用されます.コントローラのネストに相当します.自分では定義されていません.親

を探しに行きます.

scopeに{}を設定と、固定作用ドメインに相当し、自分のものだけを持って、自分が持っていなければ

は表示されません.

scopeにパラメータを渡す構成を設定すると、{content:’@’}パラメータを受け入れるように親コントローラのプロパティ

を使用できます.

scope:{myTitle:’@’}は、一方向伝達

に属する

scope:{myTitle:'@'}は、一方向伝達に属し、サブコントローラで定義された属性にmyTitleがある場合、親コントローラのmyTitleによって

が上書きされます.

scopeの修飾子はscope:{myTitle:’@’}の形式のほか、scope:{myTitle:’=’},"@"と"="の違いは"@"が値を取るときに"{}"を用いて文法を挿入することであり、例えば"="であるが、直接






    
          
    
    {{msg}}
    
    {{name}}
    
    {{age}}






            
    {{msg}}
    {{name}}


















    var app = angular.module('app',[]);

    app.controller('wmxController',['$scope',function ($scope) {
        $scope.name = '          ';
        $scope.age = 110;
        $scope.content = "          ";
        $scope.title = "        title";
    }]);

    /**
     *      ：
     *    ：     ，          ，  -  
     *    ：          ，      
     *         directive     
     *              
     *      ，                      
     */
    app.directive('wmxDir',function () {
        /**
         *       ，  {}           
         */
        return {
            /**
             * E:       
             * A：       
             * C：       
             */
            restrict:'EA',

            //                   
              //      ，         。       
//            template:'<h1>{{msg}} <p>{{content}}</p> <p>{{myTitle}}</p> <input type="text" ng-model="myTitle"> </h1>',

             //       ，         。        
             template:'<h1>{{msg}} <p>{{content}}</p> <input type="text" ng-model="myTitle"> </h1>',

            //templateUrl         template
            //  template           
            // templateUrl       html  
//            templateUrl:'template.html',

            //          false     
            replace:true,

            //ng-transclude                       
            transclude:true,

            //           (    )
               //      ，         ，      （   $scope）
               //     $scope          
            controller:function ($scope) {
                $scope.name = "          ";
                $scope.msg = "           ";

                // scope:{myTitle:’@’},      
                //                    myTitle,        myTitle  .
                $scope.myTitle = '       title'
            },
            //        scope:true,         ,
            //           .
//            scope:true,

            //    scope    {},         ,
            //      ,        
//            scope:{}

            //   scope             ,{content:’@’},
            //          ,         
            scope:{
                //         
                content:'@',

                //scope:{myTitle:’@’},      
                //@     ，    ，       
                //    ，        
//                myTitle:'@'

                //scope       scope:{myTitle:’@’}    ,
                //     scope:{myTitle:’=’},
                // ”@” ”=”     ”@”       ”{{}}”    
                //    <xmg content="{{content}}" my-title="{{title}}"></xmg>,
                //  ”=”,    <xmg content="content" my-title="title"></xmg>
                myTitle:'='
            }

        }
    });

scope:{childmentod:’&’}は、メソッド伝達、親コントローラ伝達メソッドはサブコントローラに属する.




var app = angular.module('app',[]);
app.controller('wmxController',['$scope',function ($scope) {
$scope.parentMethod = function () {
alert(' ')
}
}]);
app.directive('wmx',function () {
return {
restrict:'EA',
template:'<div><button ng-click="click()"> </button></div>',
controller:function ($scope) {
$scope.click = function () {
$scope.childMethod();
}
},
replace:true,
//scope:{childmentod:’&’},
// .
scope:{
//
childMethod:'&'
}
}
});

link命令

controllerの方法は命令をコンパイルする前に実行され、一般的にいくつかのビジネスロジックを処理し、domはレンダリングをロードしていないうちに

を実行した.

controllerでは、DOMノード

を操作することなく、いくつかのデータロジックしか処理できません.

linkはdom要素を操作し、すべてのcontrollerはlinkの前に

呼び出される.

すべてのコンテンツがコンパイルされると呼び出されます.*このメソッドが実行されると、すべてのDOM要素が

にロードされます.




var app = angular.module('app',[]);
app.controller('wmxController',['$scope',function ($scope) {
$scope.name = ' controller';
alert($scope.name);
}]);
app.directive('wmxShow',function () {
return {
restrict:'A',
template:"<div> </div>",
controller:function ($scope) {
//controller ，
//dom
// controller ， DOM
},
/**
* link dom ， controller link
* 。
* ， DOM
* @param $scope
* @param ele dom ， JQLite
* @param attr
*/
link:function ($scope,ele,attr) {
//
console.log(ele);
console.log(attr);
// ， link
alert(" link");
// DOM
if (attr.wmxShow == 'false'){
ele.css({
'display':'none'
});
}
}
}
});

php CSSファイルの画像アドレスを取得し、ローカルにダウンロードする方法

PHP、Nginx、Apacheでiframeによるページ参照を禁止する方法

14.AngularJSにおけるカスタム命令処理

2