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

Question

я создал следующую директиву:

app.directive('myActivity', function() { 
     return { 
      restrict: "A", 
      template: "<div class='activity-mask' data-ng-show='loading!=0'>" + 
         "<span>Loading... {{ loading }}</span>" + 
         "</div>" + 
         "<div class='activity-mask' data-ng-show='fetching!=0'>" + 
         "<span>Fetching... {{ fetching }}</span>" + 
         "</div>" 
     }; 
}); 

директива, кажется, не замечает $ объема. Как я могу передать в области, чтобы я мог видеть значения $ scope.fetching и $ scope.loading?

Answer 1

Используйте изолят прицел с @, так как вы хотите передать только для чтения значений в директиве:

app.directive('myActivity', function() { 
    return { 
     restrict: "A", 
     scope:{ 
      loading:"@", 
      fetching:"@" 
     }, 
     template: '<div>...</div>' 
    }; 
}); 

HTML:

<div my-activity loading="{{loading}}" fetching="{{fetching}}"></div> 

Этот подход безопасен и не загрязняет родительской области : Fiddle

Однако если вы хотите, чтобы директива разделить сферу родителя, вот демо скрипку: Fiddle

Другой безопасный способ заключается в создании двумерная связывания:

app.directive('myActivity', function() { 
     return { 
      restrict: "A", 
      scope:{ 
       loading : "=", 
       fetching : "=", 
      }, 
      template: '<div>...</div>' 
     }; 
}); 

HTML:

<div my-activity loading="loading" fetching="fetching"...