JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='App'>
    <div ng-controller='Controller'>
        <button ng-click='toggle()'>highlight</button>
        <div ng-show2='car'>Cadillac 凱迪拉克</div>
        <div>BMW 寶馬</div>
        <div ng-show2='car'>Ferrari 法拉利</div>
    </div>
</div>

CSS

.click_style{
    background-color:yellow;
}

JavaScript

//建立一個名稱為App的ng-app
var App = angular.module('App', []);
//App建立一個名稱為Controller的controller
App.controller('Controller', function($scope){
    //新增一個test變數為true
    $scope.car = true;
    //新增一個function，控制test變數
    $scope.toggle = function(){ $scope.car = !$scope.car;  };
});
//建立一個名稱為ngShow2的directive
App.directive('ngShow2', function() {
    return {
        replace: true,
        //restrict可以定義directive是A(屬性)或E(元素)或C(類別)或M(備註)，此範例是定義為屬性
        restrict: 'A',
        //link是這個directive 一被執行就做的事情
        //scope和$scope一樣，element 就是你這個 directive 標籤本身物件，attr 就是 標籤內的 屬性
        link: function(scope, element, attr){
            //用$watch去即時監看ngShow2
            scope.$watch(attr.ngShow2, function(value){
               //element.css('background-color', value ? '' : 'yellow');
                if(value){ 
                    //addClass之後，如果沒有remove掉，再加別的class、它會蓋上去
                    element.removeClass( 'click_style');
                }
                else{
                    element.addClass( 'click_style');
                }
            });
        }
    };
});