How to mix and match local variables and imported variables in a directive

in angular.js, the directive can use all the variables defined in its parent scope, for example:

.directive('directiveName', ()->
    scope: true

similarly, a directive can simply ignore the scope of its parents and define it as such

.directive('directiveName', ()->
    scope: false

further, the directive can choose to "isolate" certain variables that it wants to use from its parent area, for example:

.directive('directiveName', ()->
    scope: 
      parentScopeVar1: '='
      localVarAliasOfParentVar2: '=parentVar2'

The catch here is that these isolated variables should be declared in the html syntax of the directive as follows:

<directiveName parent-scope-var-1="parentScopeVar1" parent-var-2="parentVar2" />

Question: I noticed that if I use the isolation method ... I can no longer use my directives specific variables in html, for example, suppose I have

.directive('directiveName', ()->
    scope: 
      parentScopeVar1: '='
    ..

    link: (scope, elem, attrs) ->
      scope.directiveDefinedVar = true

and in html:

<directiveName ng-class="{active:directiveDefinedVar}" />  <!-- This doesn't work! it used to work when I had scope: false -->

, ?

, , - parentScopeVar1 .. , :

.directive('directiveName', 'parentScopeVar1Cache',(parentScopeVar1Cache)->
  ..
  link: (scope, elem, attrs) ->
    scope.parentScopeVar1Cache = parentScopeVar1Cache
    scope.$watch 'parentScopeVar1Cache', (newValue)->
      # do stuff with newValue

.. , .

+4
2

, ( ng-class), . , , . , , .

ng-.

template: '<div ng-class="{active:directiveDefinedVar}">...</div>'
+4

:

.directive('directiveName', [function () {
    return {
        restrict: 'EA',
        scope: {
            parentScopeVar: '='
        },
        template: '<div data-ng-class="{focused: hasFocus}">blabla</div>',
        controller: function($scope, $element, $attrs){
             $scope.hasFocus = false;

              $scope.onFocus = function () {
                 $scope.hasFocus = true;
              }
        .....
        }

0

Source: https://habr.com/ru/post/1547923/


All Articles