angularJS 中$attrs方法使用指南_AngularJS

這裡要跟大家分享的是一個angularJS 中$attrs方法的使用範例：

複製程式碼 程式碼如下:

   
       
       
       
       
   
   
       

            a_directive
       

       

           

                原始内容
           

           

                原始内容
           

           

                原始内容
           

           

           

               
               
                    修改
               
           

            这里
       

        <script><br /> var app = angular.module('Demo', [], angular.noop);<br /> app.controller("TestCtrl",<br /> function($scope) {<br /> $scope.name = "qihao";<br /> });<br /> app.directive("t",<br /> function() {<br /> return {<br /> controller : function($scope){$scope.name = "qq"},<br /> template : "<div>test:implementToParent{{name}}</script>

",
                    replace : true,
                    scope : true     //作用域是继承的,默认就是继承的
                }
            });
            app.directive("t2",
            function() {
                return {
                    controller : function($scope){$scope.name = "nono"},
                    template : "

test:implementToParent{{name}}

",
                    replace : true,
                    restrict : "AE"
                }
            });
            app.directive("t3",
            function() {
                return {
                    template : "

test:implementToParent_titleIs:{{title}}
title2Is:{{title2}}

”,
                    替換：true，
                    限制：「AE”，
                    範圍：{
                        以「@t3」，
                       , 標題2：「@標題2」
                    }
                }
            });
            app.directive('a',
            函數（）{
                var func = function() {
                    console.log('編譯者);
                    返回函數() {
                        console.log('連結');
                    }
                }
                var 控制器 = 函數($scope, $element, $attrs, $transclude) {
                    //$transinclude ：是指令標籤的複製者
                    console.log('控制器');
                    console.log($scope);
                    console.log($transinclude);
                    //$transinclude接受兩個參數，並可針對此複製的元素操作，
                    var node = $transclude(function(clone_element, 範圍) {
                        $element.append(clone_element);
                        $element.append("spanTag___");
                        console.log(clone_element);
                        console.log('--');
                        console.log(範圍);
                    });
                    console.log(節點);
                }
                返回{
                    編譯：func,
                    範本：「

」，
                    控制器：控制器，
                    嵌入：正確，
                    限制： 'AE'
                }
            });
            app.directive('編譯者(function() {
                var func = function() {
                    console.log('編譯者);
                    返回{
                        前：函數（）{
                            console.log(「連結前」)
                        },
                       篇：函數（）{
                            console.log('連結貼文')
                        },
                    }
                }
                返回{
                    限制：「AE”，
                    編譯：func
                }
            })
              app.directive('測驗', function(){
                var func = function($element, $attrs){
                  console.log($attrs);
                  $attrs.$observe('a', function(new_v){
                    console.log(new_v);
                  });
                }
                返回{編譯：func，
                        限制： 'E'}
              });
              app.controller('TestCtrl', function($scope){
                $scope.a = 123;
              });
              app.directive('te', function(){
                var func = function($scope,$element, $attrs,$ctrl){
                    console.log($ctrl)
                    //$attrs.$set. 給予這個屬性設定b，值為ooo，就是這樣
                  $attrs.$set('b', 'ooo');
                  $attrs.$set('a-b', '11');
                  //這又不明白啊 //第二個參數值
                  $attrs.$set('c-d', '11', true, 'c_d');
                  console.log($attrs);
                }
                return {
                        compile: function(){
                            return func
                        },
                        restrict: 'E'
                    }
              });
              app.controller('TestCtrl', function($scope){
                $scope.show = function(v){console.log(v);}
              });
       
   

本文內容就到這裡了，希望大家能對angularJS 中$attrs的使用有了新的認識，希望大家能夠喜歡本文。