Geek Answers Handbook

Ng-if if inheritance area breaks in transcluded scope

This script illustrates the problem http://jsfiddle.net/LAqeX/2/

I want to create a directive that wraps part of a page and hides it. And I would like to use ng-if to remove unnecessary bindings. But some kind of black magic happens.

This is my preferred directory code.

app.directive('withIf', function(){ return { restrict: 'E', scope: { title: '@' }, transclude: true, template: '<div>' + '<p ng-click="visible = !visible">{{title}}</p>' + '<div ng-if="visible" ng-transclude></div>'+ '</div>', link: function(scope){ scope.visible = false; } } });

It is supposed to create two areas:

  • The directive isolates a scope that has two variables - name and visibility
  • Transcluded scope, which is prototypically inherited from the “regular” scope tree.

However, ng-if causes the transclued scope to be somewhat detached from reality, and the trasncluded scope is not inherited from the controller. Please see the Violin, this very clearly illustrates the problem.

Any ideas on what is going on there and how to solve it?

UPDATE

I seem to have figured out the reasons why the chain of chains seems broken. The scope created by ng-if belongs to the isolate branch directive. Therefore, he never knows that the controller area even exists. But the question remains the same - how to use ng-if in this case.

+6
source share
2 answers

ng-if creates a child scope, use $parent to access variables from the parent scope. But in your case, I would consider using ng-show or ng-hide instead of ng-if (they do not create child areas)

+1
source

This error seems to be fixed in Angular 1.3 - https://github.com/angular/angular.js/pull/7499

+1
source

More articles:


All Articles