Question

CSS

ul {
   display: none
}
span.active+ul {
   display:block
}

html

<div ng-controller='exchangeFormCtr'>
    <div toggle-class="active">
       <ul>
           <li ng-repeat='carrency in carrencies'>
       </ul>
    </div>
    <div toggle-class="active">
       <ul>
           <li ng-repeat='carrency in carrencies'>
       </ul>
    </div>   
</div>

控制器

exchange.controller('exchangeFormCtr',['$scope', function($scope) {
    $scope.carrencies = [
        {name:'mastercard'},
        {name:'visa'},
        {name:'paypal'}
    ];
}]);

指令

app.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                console.log(element);
                element.toggleClass(attrs.toggleClass);
            });
    }
};

当我点击span指令更改类激活或删除它时。

如何捕捉外部点击事件并通过角度方式删除活动类？

Answer 1

您可以沿着元素点击的stopPropagation（）向文档对象添加一个单击处理程序。

＆＃13;

var app = angular.module('my-app', [], function () {})

app.controller('AppController', function ($scope) {
    $scope.message = "Welcome";
});

app.directive('toggleClass', function ($document) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            console.log(element)

            function elementClick(e) {
                e.stopPropagation();
                element.toggleClass(attrs.toggleClass);
            }

            function documentClick(e) {
                element.removeClass(attrs.toggleClass);
            }

            element.on('click', elementClick);
            $document.on('click', documentClick);

            // remove event handlers when directive is destroyed
            scope.$on('$destroy', function () {
                element.off('click', elementClick);
                $document.off('click', documentClick);
            });
        }
    };
});

＆＃13;

.active {
  color: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  <span toggle-class="active">ff</span> 
</div>
asdf

＆＃13;

Answer 2

您的指令中有一些缺少的结尾字符。见this working fiddle

myApp.controller('exchangeFormCtr',['$scope', function($scope) {
    $scope.carrencies = [
        {name:'mastercard'},
        {name:'visa'},
        {name:'paypal'}
    ];
}

myApp.directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                console.log(element);
                element.toggleClass(attrs.toggleClass);
            });
        }
    }
});

Answer 3

使用<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="ua.andriyantonov.donorua" > <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_SYNC_SETTINGS" /> <uses-permission android:name="android.permission.WRITE_SYNC_SETTINGS" /> <uses-permission android:name="android.permission.AUTHENTICATE_ACCOUNTS" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:theme="@style/DonorUaTheme" > <activity android:name=".activities.RegisterActivity" android:label="@string/title_activity_register" > </activity> <activity android:name=".activities.RecipientsActivity" android:label="@string/app_name" android:launchMode="singleInstance" android:theme="@style/MainActivityTheme" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name=".activities.RecipientDetailActivity" android:label="@string/title_activity_recipient_detail" android:parentActivityName=".activities.RecipientsActivity" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".activities.RecipientsActivity" /> </activity> <activity android:name=".activities.SettingsActivity" android:label="@string/title_activity_settings" android:parentActivityName=".activities.RecipientsActivity" android:theme="@style/SettingsTheme" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".activities.RecipientsActivity" /> </activity> <activity android:name=".activities.CentersOnMapActivity" android:label="@string/title_activity_centers_on_map" android:launchMode="singleInstance" android:parentActivityName=".activities.RecipientsActivity" android:theme="@style/MainActivityTheme" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".activities.RecipientsActivity" /> </activity> <activity android:name=".activities.NeedToKnowActivity" android:label="@string/title_activity_need_to_know" android:launchMode="singleInstance" android:theme="@style/MainActivityTheme" > </activity> <activity android:name=".activities.NeedToKnowDetailActivity" android:label="@string/title_activity_need_to_know_detail" android:parentActivityName=".activities.NeedToKnowActivity" android:theme="@style/DonorUaTheme" > <meta-data android:name="android.support.PARENT_ACTIVITY" android:value=".activities.NeedToKnowActivity" /> </activity> <activity android:name=".activities.UserInfoActivity" android:label="@string/drawer_item_user_info" android:launchMode="singleInstance" android:theme="@style/MainActivityTheme" > </activity> ================================== <provider android:name=".data.DonorProvider" android:authorities="@string/content_authority" android:exported="false" android:syncable="true" /> <service android:name=".sync.DonorAuthenticatornService" > <intent-filter> <action android:name="android.accounts.AccountAuthenticator" /> </intent-filter> <meta-data android:name="android.accounts.AccountAuthenticator" android:resource="@xml/authenticator" /> </service> <service android:name=".sync.DonorSyncService" android:exported="true" > <intent-filter> <action android:name="android.content.SyncAdapter" /> </intent-filter> <meta-data android:name="android.content.SyncAdapter" android:resource="@xml/syncadapter" /> </service> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="@string/google_maps_key" /> </application> </manifest>和部分ng-class提取所选值

filters

var exchange = angular.module('App', []);

exchange.controller('exchangeFormCtr', ['$scope',
  function($scope) {
    $scope.carrencies = [{
      name: 'mastercard'
    }, {
      name: 'visa'
    }, {
      name: 'paypal'
    }];

    $scope.selectAll = function() {
      angular.forEach(
        $scope.carrencies, function(carrency) {
          console.log('ici')
          carrency.active = true;
        });
    }
  }
]);

.active {
  background-color: green;
  color: orange;
}

Angular在指令中的元素外部单击

3 个答案: