Angular.js 속성 지시문에 여러 속성을 전달하려면 어떻게해야합니까?

Question

나는 다음과 같은 속성 지시자는 제한이 있습니다

restrict: "A" 

나는 두 가지 속성에 전달해야합니다; 숫자 및 함수/콜백을 호출하여 attrs 객체를 사용하여 지시문 내에서 액세스합니다.

지시어는이에 "E" 내가 할 수와 제한 요소 지시어,라면 : 나는 속성 지시자로 지시문을 필요로

<example-directive example-number="99" example-function="exampleCallback()"> 

그러나 이유로 나는 가지 않을 것입니다.

속성 지시문에 여러 속성을 전달하려면 어떻게해야합니까?

Answer 1

지향성 :

app.directive('sample', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      'sample' : '=', 
      'another' : '=' 
     }, 
     link: function (scope, element, attrs) { 
      console.log(attrs); 
      scope.$watch('sample', function (newVal) { 
       console.log('sample', newVal); 
      }); 
      scope.$watch('another', function (newVal) { 
       console.log('another', newVal); 
      }); 
     } 
    }; 
}); 

이 쓰인다.

틀 :

<div example-directive example-number="99" example-function="exampleCallback()"></div> 

지침 :

app.directive('exampleDirective ', function() { 
    return { 
     restrict: 'A', // 'A' is the default, so you could remove this line 
     scope: { 
      callback : '&exampleFunction', 
     }, 
     link: function (scope, element, attrs) { 
      var num = scope.$eval(attrs.exampleNumber); 
      console.log('number=',num); 
      scope.callback(); // calls exampleCallback() 
     } 
    }; 
}); 

fiddle

속성 example-number의 값이 하드 코딩 될 경우, 한번 $eval을 사용하고, 기억 제안 값. 변수 num은 올바른 유형 (숫자)을 갖습니다.

Answer 2

당신은 요소 지시어와 똑같은 방법을 사용합니다. 당신은 attrs 객체에 그것들을 가지고있을 것이고, 나의 샘플은 고립 된 스코프를 통해 양방향 바인딩을 가지고있다. 그러나 그것은 필요하지 않다. 격리 된 범위를 사용하는 경우 scope.$eval(attrs.sample) 또는 단순히 scope.sample과 함께 속성에 액세스 할 수 있지만 상황에 따라 링크시 정의되지 않을 수 있습니다. 지향성 자체 소자가 아닌 경우에도, 동일한 요소에 정의되어있는 속성을 액세스 할 수

<input type="text" ng-model="name" placeholder="Enter a name here"> 
<input type="text" ng-model="something" placeholder="Enter something here"> 
<div sample="name" another="something"></div> 

Answer 3

이것은 나를 위해 일했으며 HTML5가 더 준수한다고 생각합니다. 당신은 '데이터 -'접두사를

<div data-example-directive data-number="99"></div> 

를 사용하도록 HTML을 변경하고 지침 내에서 변수의 값 읽어야 : 당신은 속성으로 객체를 전달하고이 같은 지시에 그것을 읽을 수

scope: { 
     number : "=", 
     .... 
    }, 

Answer 4

을 : 다른 지침에서 'exampleDirective'을 "필요"+ 로직이 'exampleDirective의'컨트롤러에있는 경우

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div> 

app.directive('myDirective', function() { 
    return {    
     link: function (scope, element, attrs) { 
      //convert the attributes to object and get its properties 
      var attributes = scope.$eval(attrs.myDirective);  
      console.log('id:'+attributes.id); 
      console.log('id:'+attributes.name); 
     } 
    }; 
}); 

Answer 5

는 (의는 'exampleCtrl'를 가정 해 봅시다) :

app.directive('exampleDirective', function() { 
    return { 
     restrict: 'A', 
     scope: false, 
     bindToController: { 
      myCallback: '&exampleFunction' 
     }, 
     controller: 'exampleCtrl', 
     controllerAs: 'vm' 
    }; 
}); 
app.controller('exampleCtrl', function() { 
    var vm = this; 
    vm.myCallback(); 
});