Question

我正在尝试访问放在段落旁边的按钮类。一旦焦点出现在段落上，按钮类就应该改变。请参阅以下HTML代码：

    <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>

控制器的角度代码为：

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";
        }
    }

怎么可能以角度方式完成？我知道它类似于$$ nextSibling，但访问类名是一个问题。我google了很多，什么都没发现。请帮忙!!!

请建议任何动态的方式我也不能硬编码按钮的任何ID。

Answer 1

这可能如下所示：

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>

但主要是DOM操作必须通过指令完成。控制器必须主要像ViewModel一样。因此，如果您可以创建指令并将其添加到contenteditable span标记。

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");
             });
         }

     }
 });

在您的HTML中：

   <span focus-adjacent-button id="value" contenteditable="true">abcd@abc.com</span>

如何使用angularjs访问下一个兄弟的元素的属性/属性？

1 个答案: