Argümanlar açısal direktifi

Question

için aynıdır yönerge şu var:

app.directive('filterComponent', function() { 
    return { 
    restrict: 'E', 
    templateUrl: 'filter-component.html', 
    link: function(scope, element, attrs) { 
     console.log(attrs); 
     scope.type = attrs["type"]; 
    } 
    }; 
}); 

ve benim html farklı yerlerde üç kez diyoruz:

<filter-component type="TYPE1"></filter-component> 
<filter-component type="TYPE2"></filter-component> 
<filter-component type="TYPE3"></filter-component> 

ve bu yönerge html geçerli:

<div id="{{type}}" class="filter-container"> 
    <div layout="row" class="rhs-text" ng-show="!noTargetSelectedYet"> 
     <md-input-container flex=""> 
      <label>Search</label> 
      <input style="position: relative; top: 7.8px;" ng-model="filterText"> 
     </md-input-container> 
    </div> 
</div> 

Sorun şu ki, id ({{type}}) aynıdır. (sonuncusu, TYPE3) tür için farklı değerler göndermeme rağmen (console.log(attrs) da görülür).

Bunun nesi yanlış?

Answer 1

Bunu dış kapsamını etkilemez böylece direktifi için izole kapsamını ayarlamak gerekir:

app.directive('filterComponent', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     type: '=' 
    }, 
    templateUrl: 'filter-component.html', 
    link: function(scope, element, attrs) { 
     console.log(attrs); 
     scope.type = attrs["type"]; 
    } 
    }; 
}); 

En İyi Uygulama: istediğiniz bileşenleri için yaparken izolatı kapsamları oluşturma kapsam seçeneğini kullanın uygulamanız boyunca yeniden kullanın.

https://docs.angularjs.org/guide/directive

Güncelleme

da filterText kullanmak için:

app.directive('filterComponent', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     type: '@', // You want this to be passed as a string 
     filterText: '=' // You want this to be passed as reference 
    }, 
    templateUrl: 'filter-component.html', 
    link: function(scope, element, attrs) { 
     console.log(attrs); 
     scope.type = attrs["type"]; 
    } 
    }; 
}); 

HTML:

<filter-component type="TYPE1" filterText="filterText"></filter-component> 

İzolatör kapsamları hakkında daha iyi bir anlayış için buna başvurabilirsiniz: http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-2-isolate-scope