divの背景を変更したいのですが、それはis clickedです。だから、どのように角度の$(this) divにアクセスできますか？
私のコードは次のとおりです。
<div id="single" ng-click="changeit()">
foobar
</div>
と機能は次のとおりです。
$scope.changeit=function($scope){
// jquery code $(this).css({"background":"#A4A4A4"});
// how in angular ?
}
あなたは$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>
と要素にclickイベントを追加し、それをクリックしたときの色を変えるchangeColorディレクティブ。
(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' });
}
}
}
})();
DOM操作は、理想的には、角度を使用する場合は指示句の唯一のドメインにする必要があります。これにより、コントローラのロジックをDOMプレゼンテーションに貼り付けることがなくなり、ひどい混乱が生じます。これを念頭に置いて、Angularには、スタイリング、ng-style、ng-classに関連する2つの指示があります。 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="[email protected]" 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>感謝しています:) – Asad
使用これであってもよいこと作業NGクリック= "changeitと（$イベント）" – uzaif
、あなたはパラメータで$範囲をaccesptなぜ？ – uzaif
あなたのスコープで関数を呼び出したり、コントローラでDOMを操作したりするのではなく、このタスクにng-styleやng-classのようなディレクティブを使用してみましょう。これはAngularのベストプラクティスではありません。 – mccainz