Angularjs - ng-if - bypass / work around the scope logic

Question

I am aware that use of ng-if dictates that ng-if destroys the scope on the element unlike the use of ng-show or ng-hide.. I however need to use ng-if (ng-show / hide is not an option) because I actually need the element to not render on the page when ng-if is falsely..

I use ng-if as part of a directive template..

My directive

app.directive("myDirective", function ($parse) {
return {
    restrict: "E",
    scope:{},
    controller: function ($scope, $element, $attrs) {
        // controller code
    },
    templateUrl: "template.html",
    compile: function(elm, attrs){
        var expFn = $parse(attrs.atr1 + '.' + attrs.atr2);
            return function(scope,elm,attrs){

                scope.$parent.$watch(expFn, function(val){
                    scope.exp = val;
                })

                scope.$watch('exp', function(val){
                    expFn.assign(scope.$parent, val)
                })
            }
    }
}
})

My template

<div ng-click="view = !view">{{exp}}</div>

<div ng-if="view">

    <input type="text" ng-model="exp"><br/>

    <div class="btn btn-default" ng-click="Submit()">Submit</div>

</div>

Is there a way to "bypass" the ng-if behavior,,, to KEEP the scope,, or recreate it?

SimonSparks · Accepted Answer · 2014-02-08 01:16:08Z

5

I created the attach-if directive for this purpose.

The code is available at https://github.com/Sparks-Creative-Limited/angular-attach-if and, if you use bower, it's registered as a downloadable component with the following details:

angular-attach-if 0.1.0

There is also a demo page to show how it works.

answered Feb 8, 2014 at 1:16

SimonSparks

8801 gold badge7 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

GRowing Over a year ago

I will take a look and get back to you thanks! I was about to start writing a modified version of ng-if as well.

GRowing Over a year ago

Your directive does work in the general context of scope and ng-if. I find it quite useful, thank you. It however does not quite fit with the issue I have.. when I use it, I still get problems with finding element ng-model for some reason. I accepted your answer because it is regardless of my issue, a useful one :)

GRowing Over a year ago

I referenced you in this question stackoverflow.com/questions/21667778/… ,, I hope you don't mind.

SimonSparks Over a year ago

Hi. No, I don't mind. If you would like to raise an issue on the github project with an example, I may be able to improve the attach-if directive for you.

GRowing Over a year ago

I found a reason why my method wasn't working. I will still go back to yours and take a closer look. I suppose we can find an issue :)

Oak · Accepted Answer · 2014-01-30 23:53:22Z

0

If you are using ng-if it won't create the element at all period. So the directive does not exist in that instance. I know you mentioned ng-hide/show is not an option but I think its the only option. What is your reason for not wanting it to render and keep its scope? which by the way defeats the purpose of the directive. If you are doing some logic in the directive that doesn't require the view, it should belong somewhere else.

answered Jan 30, 2014 at 23:53

Oak

4715 silver badges14 bronze badges

3 Comments

GRowing Over a year ago

I am fully aware of what ng-if does and the fact it creates a child scope.. Why I need to use it does not fit on 3 pages of text.. but,, it's a security relate

GRowing Over a year ago

I am aware of what ng-if does and the fact it creates a child scope.. Why I need to use it does not fit on 3 long pages of text.. but,, it's security related.. The directive clearly has a visible and conditionally visible component (it is by no means invisible).. I am asking a specific question because I need a specific solution.. WHEN rendered I need access to parent scope... (I think I just answered my own question.. I need to reference a $parent model) .. Either way.. An actual answer or a good reference would be helpful.

GRowing Over a year ago

Sorry for doubled up answer portion,, I accidentally hit the add comment button

Stalin Gino · Accepted Answer · 2016-12-16 18:39:32Z

0

If the scope has single/few variable, ng-init="obj=$parent.obj" on the same tag where ng-if is, would help.

answered Dec 16, 2016 at 18:39

Stalin Gino

6221 gold badge13 silver badges29 bronze badges

Collectives™ on Stack Overflow

Angularjs - ng-if - bypass / work around the scope logic

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related