angularjs dom manipulation based on button click -

basically want change attribute value based on button clicked, these 2 buttons

<button ng-click="fn(a)"></button> <button ng-click="fn(b)"></button>

and have prebuilt directive takes value input,

<div directive-name="" id="abc"></div>

if click on first button,i want value of directive based on button clicked.

what did earlier;

$scope.go = function(data){ if(data==a){ var b =  document.queryselector( 'div' ); b.setattribute("directive-name","value"); } else{} }

here problem is selecting first div of document , setting attribute value that. tried pass id like

var b = angular.element(document.queryselector('#abc'));

i saw custom directives so, not working

if possible provide me demo in plunkr or fiddle

and if want change css property of div based on button clicked

thanks in advance

you can this. assign directive-name value $scope.variable , use variable value in html.

html - 1:

<button ng-click="go(a)"></button> <button ng-click="go(b)"></button>

html - 2:

<div directive-name="{{directive}}" id="abc"></div>

js:

$scope.go = function(data){   if(data==a){     $scope.directive = "directive-1";   }else if(data==b){     $scope.directive = "directive-2";   } }

to assign class name div can define other $scope.classvar , use in html below:

<div directive-name="{{directive}}" id="abc" ng-class="classvar"></div>

i hope solve problem.

wiki

tL