1

我正在尝试访问放置在段落旁边的按钮类。一旦焦点放在段落上，按钮的类别就应该改变。请参阅下面的 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 ，但访问类名是有问题的。我用谷歌搜索了很多，但一无所获。请帮忙！！！

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

4

1 回答 1

2

这可能如下所示：

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 操作必须通过指令来完成。Controller 必须像 ViewModel 一样工作。因此，如果您可以创建一个指令并将其添加到contenteditablespan 标签中。

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>
于 2015-03-30T15:53:14.617 回答