1

I am trying to access the class of button which is placed next to paragraph. As soon as the focus gets on paragraph the class of button should change. Please see HTML the code below :

    <div>
    <span id="key" class="col-lg-2">email : </span>
    <span ng-focus="focused($event)" id="value" contenteditable="true">abcd@abc.com</span>
    <input type="submit" name="update" value="update" 
                 class="update-hide" data-ng-click="updateValue($event)">
    </div>

The angular code for controller is :

var TestParseController = function($scope, $window, $http, $routeParams, $sce,
        $compile) {
    $scope.focused = function(focusedValue) {
        var par = focusedValue.target.parentNode;
        var nodes = par.childNodes;
        nodes[2].className="update-regular";
        }
    }

How could this be done in angular way? I know its something like $$nextSibling , but accessing the class name is problamatic. I have googled a lot and found nothing. Please help!!!

Please suggest any dynamic way i can not hardcode any id for button also.

Parul Abrol
  • 483
  • 5
  • 7

1 Answers1

2

This can be like below:

angular.module("app",[])
.controller("MainCtrl", function($scope) {
$scope.focused = function(focusedValue) {
    var par = focusedValue.target.parentNode;
    angular.element(par.querySelector("input[type=submit]")).addClass("update-regular");
    }
});
.update-regular {
   background: red;
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
  <div>
<span id="key" class="col-lg-2">email : </span>
<span ng-focus="focused($event)" id="value" contenteditable="true">abcd@abc.com</span>
<input type="submit" name="update" value="update" 
             class="update-hide" data-ng-click="updateValue($event)">
</div>

</body>
</html>

But mostly DOM manipulation must be done via directives. Controller must act mostly like ViewModel. So if you could create a directive and add it to the contenteditable span tag.

angular.module("app", [])
    .directive("focusAdjacentButton", function () {
     return {
         restrict: "AEC",
         link: function (scope, element, attrs) {
             element.on("focus", function () {
                 angular.element(element[0].parentNode.querySelector("input[type=submit]")).addClass("update-regular");
             });
              // if you want to remove the class on blur

        element.on("blur", function () {
                 angular.element(element[0].parentNode.querySelector("input[type=submit]")).removeClass("update-regular");
             });
         }

     }
 });

In your HTML:

   <span focus-adjacent-button id="value" contenteditable="true">abcd@abc.com</span>
mohamedrias
  • 18,326
  • 2
  • 38
  • 47
  • Hey thanks for your answer, it worked fine. But can you suggest any other way, consider a scenario like if i have multiple buttons as sibling elements. So the method you suggested will change class of all the buttons, but i want to change class of only next sibling button element. – Parul Abrol Mar 31 '15 at 07:32
  • It will addClass to the first button within that parentNode. If you want to target only the sibling element, you can use nextSiblingElement within that – mohamedrias Mar 31 '15 at 07:35