angularjs - have a button click alter another element's content

Question

so the question title is vague but basically I have a button element, I want to click that button and have another element be altered by it. Could anyone give me any idea's on what I'm missing or give me a clear example of how to achieve this.

code below:

html:

<div ng-controller="buttonController">
     <button ng-click="fadeIt()">click to fade</button>
     <div class="redbox" my-directive my-two-way-binding="twoWay">fade me</div>
</div>

controller:

function buttonController($scope){
    $scope.twoWay = false;

    $scope.fadeIt = function(){
        $scope.twoWay = !$scope.twoWay;
        console.log("inside fadeIt function $scope.twoWay is: " + $scope.twoWay);
    }
}

directive:

app.directive("myDirective", function(){
     return{
         restrict:"A",
         scope: {
             twoWayBind: "=myTwoWayBinding"
         },
         link:function(scope, element, attrs){
             //console.log("directive - twoWayBind is: " + scope.twoWayBind);    
             scope.$watch(scope.twoWayBind, function(newVal){
                 console.log('inside directive ' + scope.twoWayBind);    
             });
         }
     };
 });

Jonathan Rowny · Accepted Answer · 2014-02-19 20:55:53Z

3

scope.$watch(scope.twoWayBind should be scope.$watch('twoWayBind' because $watch accepts a string referring to a property on scope, not an actual model. Other than that I think you have the right idea.

Also, for cleanliness sake, you could have made it

scope:{
  twoWayBind: "=myDirective"
}

then you could shorten your template code to:

 <div class="redbox" my-directive="twoWay">

which in my opinion is a little cleaner.

edited Feb 19, 2014 at 20:55

answered Feb 19, 2014 at 20:42

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

angularjs - have a button click alter another element's content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related