如何访问 angularjs 中的 $(this) div

Question

我想更改 div 和 is clicked 的背景。那么，我如何才能在 angular 中访问 $(this) div？

我的代码是：

<div id="single" ng-click="changeit()"> 
     foobar
</div>

函数是：

$scope.changeit=function($scope){
    // jquery code $(this).css({"background":"#A4A4A4"});
    // how in angular ?
}

Answer 1

您可以通过 $event 并使用 target 来检索当前点击的元素。

<div id="single" ng-click="changeit($event)"> 
    asad
</div>

$scope.changeit = function ($event) {
    $($event.target).css({ 'background': '#A4A4A4' });
}

使用指令的方式，你可以这样做：

<div id="single" data-change-color>foobar</div>

和 changeColor 指令，它在元素上添加 click 事件并在单击它时更改颜色。

(function () {
    'use strict';

    angular
        .module('myModuleName')
        .directive('changeColor', changeColor);

    changeColor.$inject = [];

    function changeColor () {

        return {
            restrict: 'A',
            scope: {},
            link: link
        };

        function link (scope, element) {
            element.on('click', onClick(element));
        }

        function onClick (element) {
            return function () {
                element.css({ 'background': '#A4A4A4' });
            }
        }
    }
}) ();

Answer 2

DOM 操作理想情况下应该是使用 angular 时的唯一指令域。这可以防止我们将我们的控制器逻辑粘附到我们的 DOM 演示文稿中，这会造成可怕的混乱。考虑到这一点，Angular 有两个与样式相关的指令，ng-style 和 ng-class。下面演示ng-class

https://docs.angularjs.org/api/ng/directive/ngStyle

https://docs.angularjs.org/api/ng/directive/ngClass

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    
    <style>
      .active{
        background:red;
      }
    </style>
  </head>

  <body ng-controller="ctrl">
    
    <button ng-click="activeButton = 1" ng-class="{'active' :activeButton==1}">Button 1</button>
    <button ng-click="activeButton =2" ng-class="{'active' :activeButton==2}">Button 2</button>
    <button ng-click="activeButton = 3" ng-class="{'active' :activeButton==3}">Button 3</button>
    
    <script>
      var app = angular.module("app",[]);
      app.controller("ctrl",function(){});
      angular.bootstrap(document,[app.name]);
    </script>
    
  </body>

</html>

如何访问 angularjs 中的 $(this) div

How to access $(this) div in angularjs

html

angularjs