0

I have a directive which is triggered to hide an element when a condition is reached.

     var hideElement = function(){
            el = element.find('.myelement');
            $(el).addClass('hideme');                          
     };

then in a conditional I trigger the hideElement function

 if(j >= count){
      hideElement ();
 }

how do I refactor this on the partial to make a change to the ng-class?

<div 
    data-directivename 
    data-increment="increment" 
    data-count="count" 
    ng-class="{'timetohide': hide}"
>
    <div class="myelement"></div>
</div>
Improve this question

3 Answers 3

Reset to default
2

Simply use a scope variable:

var hideElement = function(){
    scope.hide = true;
};

And then, your ng-class="{'timetohide': hide}" will work just fine - the element will get the timetohide class when scope.hide is truthy.

UPDATE

Since you're using isolated scope in the directive, you actually need to modify the parent scope variable because that's what the ng-class is watching, so the code from above should be:

var hideElement = function(){
    scope.$parent.hide = true;
};

See it here: http://plnkr.co/edit/dXSi5hH4FEVQuDS9uMOl?p=preview (the version after all our comments)

Explanation from: http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Scope : { } ( Directive gets a new isolated scope )

This is the most interesting section. Till now, we saw two situations for directive scope creation. In the third type, we are going to set scope property in DDO to an Object literal. When an object literal is passed to the scope property, things are bit different. This time, there will be a new scope created for the directive, but it will not be inherited from the parent scope. This new scope also known as Isolated scope because it is completely detached from its parent scope.

Makes sense.

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

9 Comments

I don't get this - it comes out as class="ng-isolate-scope"
Yes, and when scope.hide becomes truthy, ng-class would change the class to "ng-isolate-scope timetohide".
No man, its not taking it - do I need to define the scope/ am I overwriting it? Do I need to include hide?
return { restrict: 'A', link: linker, controller: ctrl, scope: { increment: "=", count: "=", } };
It should be inside the directive controller, so you're using the existing scope, here's an example for you: plnkr.co/edit/MydPkayUcmJYjO0AVWhz?p=preview (it goes red instead of hidden, click to toggle it)
|
0

I would do it this way

Ng: 

scope.someCondition = true;

HTML

<div class="myelement" ng-show="someCondition"></div>
Improve this answer

1 Comment

May have a similar problem trying to invoke a change in ng-show - I've posted the directive/controller setup - its like this because I am changing values inside the directive from another
-1

My controller and directive

return angular.module("portal").directive("doughnutIncrementor", [
        "Account",
        "Common",
        function (Account, Common) {
            var ctrl, linker;

            ctrl = function($scope){
                $scope.increment = 15;
                $scope.count = 5;
                $scope.isHide = false;
            },
            linker = function(scope, element, attrs) {


                var hideDoughnutIndicator = function(){
                    console.log('scope hide', scope.isHide); //here it is false as it should be
                    scope.isHide = true;
                    console.log('scope hide', scope.isHide); //then it becomes true - but has no impact on the ng-class which remains as "ng-isolate-scope"            
                };


                var j = 1;
                scope.$watch(attrs.increment, function(value) {
                    if(j >= scope.count){
                        hideDoughnutIndicator();
                    }
                    j++;
                });
            };

            return {
                restrict: 'A',
                templateUrl: Common.paths.partials + '/doughnut-incrementor.html',
                link: linker,
                controller: ctrl,
                scope: {                   
                    increment: "=",
                    count: "=",
                }
            };
        }
    ]);

my partial

<div data-doughnut-incrementor data-increment="increment" data-count="count" ng-class="{hide : isHide}"></div>
Improve this answer

26 Comments

It sets the scope.isHide to true - but the class doesn't get affected - whats wrong
I've also tried wrapping it in an $apply but then it gets an error saying "$digest already in progress". var hideDoughnutIndicator = function(){ scope.$apply(function () { scope.isHide = true; }); };
doughnut-incrementor.html actually has an emtpy div "<div class="doughnutindicator" data-initial-value="5" data-radius=120></div>"
Seems like a directive scope issue, I'll let you know in a minute
Its complex - because I change the increment outside of this directive - and that part works fine, but its then appending this ng-class - which is a problem
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.