Как передать несколько атрибутов в директиве атрибутов Angular.js?

Question

У меня есть директива атрибут ограничен следующим образом:

restrict: "A" 

Мне нужно передать в двух атрибутов; число и функцию/обратный вызов, обращаясь к ним в пределах директивы, используя объект attrs.

Если директива была директива элемента, ограниченная с "E" я мог на это:

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

Однако, по причинам, я не буду вдаваться в мне нужна директива, чтобы быть директивой атрибута.

Как передать несколько атрибутов в директиве атрибута?

Answer 1

Эта директива может получить доступ к любому атрибуту, который определен в том же элементе, даже если сама директива не является элементом.

Шаблон:

<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, но они не могут быть определены при привязке в зависимости от вашей ситуации.

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); 
      }); 
     } 
    }; 
}); 

используется как:

<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. Вы должны изменить свой HTML, чтобы использовать «DATA- префикс»

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

И в директиве прочитать значение переменной:

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

Answer 4

Вы можете передать объект как атрибут и прочитать его в директиве, как это :

<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

Если вы "требуют" 'exampleDirective' из другой директивы + ваша логика в контроллере 'exampleDirective в' (скажем '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(); 
});