0

ng-class テンプレートのコントローラーで変数の値を参照していますが、機能していません。

html ディレクティブ テンプレート URl は次のとおりです。

<div class="tooltip-anchor">
<div class=" tooltip-content ehub-body" ng-class="{ 'tooltip__content--disabled': tooltipContentValue}" ng-transclude>Tooltip content</div>
</div>

これは、インデックスページでディレクティブを使用している場所です

 <div style="text-align:center;">
  <a href="" ng-keyup="keyupevt()"><ehub-tooltip>Hello i am here, and i am her to stay</ehub-tooltip>over here</a>
  <a href="" ng-keyup="keyupevt()"><ehub-tooltip>Be nice to people on your way up and they will be nice to you on your way down</ehub-tooltip>click me</a>
 </div>

そして、ここにディレクティブがあります：このディレクティブでは、変数を作成してfalseに設定し、ng-class属性でも使用しようとしています

(関数 (ウィンドウ) { 'use strict';

angular
  .module('ehub.component.tooltip', [])
    .controller('ehubTooltipCtrl', ['$scope', function ($scope) {
        $scope.tooltipContentValue = false;

    }])
  .directive('ehubTooltip', ehubTooltip);

function ehubTooltip() {
    var directive = {
        controller: "ehubTooltipCtrl",
        link: link,
        transclude: true,
        templateUrl: 'ehub-tooltip.html',
        restrict: 'E'

    };
    return directive;

    function link(scope, element, attrs) {

        scope.keyupevt = function () {
            if (event.keyCode === 27) {
                $scope.tooltipContentValue = true;

            }
         }

     }
  }

})();

4

1 に答える 1

0

この作業jsfiddleを試してください。

angular.module('ExampleApp', ['ngMessages'])
  .controller('ExampleController', function($scope) {

  })
  .directive('ehubTooltip', function() {
    var directive = {
      link: link,
      transclude: true,
      template: '<div class="tooltip-anchor"><div class=" tooltip-content ehub-body" ng-class="{ \'tooltip__content--disabled\': tooltipContentValue}" ng-transclude>Tooltip content</div></div>',
      restrict: 'E'
    };
     function link(scope, element, attrs) {
      scope.tooltipContentValue = false;
      scope.keyupevt = function() {
        if (event.keyCode === 27) {
          scope.tooltipContentValue = true;
        }
      }

    }
    return directive;
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="ExampleController">

    <div style="text-align:center;">
      <a href="" ng-keyup="keyupevt()">
        <ehub-tooltip>Hello i am here, and i am her to stay</ehub-tooltip>over here</a>
      <a href="" ng-keyup="keyupevt()">
        <ehub-tooltip>Be nice to people on your way up and they will be nice to you on your way down</ehub-tooltip>click me</a>
    </div>
  </div>
</div>

于 2016-02-17T04:48:10.807 に答える