Birden çok niteliği Angular.js özellik yönergesine nasıl geçiririm?

Question

Ben şöyle bir özellik yönergesi kısıtlı olması:

restrict: "A" 

İki özelliklerinde geçmesi gerekiyor; attrs nesnesini kullanarak yönerge içinde erişen bir sayı ve bir işlev/geri çağrı.

yönergesi buna "E" elimden ile kısıtlı bir eleman yönergesi, olsaydı: Ben bir nitelik yönergesi olması yönergesi ihtiyaç haline

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

Ancak nedenlerle ben gitmeyeceğim.

Birden çok özniteliği öznitelik direktifine nasıl geçiririm?

Answer 1

direktif:

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

olarak kullanılır.

Şablon:

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

talimatı:

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

nitelik example-number değeri kodlanmış edilecek olursa, bir kez $eval kullanılarak ve depolanması önermek değer. num değişkenleri doğru türde (bir sayı) olacaktır.

Answer 2

Bunu bir eleman direktifiyle yaptığınız gibi yapın. Onları attrs nesnesine sahip olacaksınız, örneğim onları izolatör alanıyla iki yönlü olarak birleştiriyor ancak bu gerekli değil. Yalıtılmış bir kapsamı kullanıyorsanız, scope.$eval(attrs.sample) ile ya da yalnızca scope.sample ile özniteliklere erişebilirsiniz, ancak durumunuza bağlı olarak bağlantıda tanımlanamayabilir. yönerge kendisi eleman olmasa bile, aynı elemana tanımlanan herhangi niteliğini erişebilirsiniz

<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

Bu benim için çalıştı ve ben daha HTML5 uyumlu olduğunu düşünüyorum. Sen veriye 'önek

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

kullanmak için html değiştirmek Ve direktif içinde değişkenin değerini şöyle olmalıdır: öznitelik olarak bir nesne geçmek ve bunun gibi direktif içine okuyabilir

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

Answer 4

: başka bir direktif gelen 'exampleDirective' "gerektiren" + senin mantık 'exampleDirective en' denetleyicisi ise

<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

(en 'exampleCtrl' diyelim):

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