Question

我有一个指令，当点击一个元素形成一个ng-repeat列表时出现。到目前为止，该指令没有切换，因此只有在单击另一个元素时单击该项并进行销毁和重新创建时才会显示该指令。

我遇到的问题是，一旦我显示了ng-repeat列表并且用户点击了一个元素，该指令就会出现，但是如果用户然后过滤了该列表，则该元素绑定到该指令将会消失，但指令仍将存在。

我尝试在过滤的输入中添加 ng-focus =＆＃34; hideVersions = true＆＃34; ，以及 ng-hide =＆＃34 ; hideVersions＆＃34; 在包装指令的容器中，但到目前为止还没有运气。

这是我的过滤器：

<input ng-show="artist.name" ng-model="$parent.album" ng-focus="hideVersions = true" placeholder="Filter by release name""/>

指令：

angular.module('myApp').directive('theDirective', function($http, $compile) {
  return {
    restrict: 'A',
    scope: {
      position: '@',
      last: '@',
      release: '='
    },
    link: function(scope, element, attrs) {
      scope.getVersions = function() {
        $http.get(scope.release.resource_url + '/versions', {ignoreLoadingBar: true}).
        success(function(data5) {
          scope.versions = data5.versions;
        }).
        error(function(){
          $http.get(scope.release.resource_url, {ignoreLoadingBar: true}).
          success(function(data6) {
            scope.singleversion = data6;
          })
        });
      }
      scope.$on('$destroy', function() {
        element.unbind('click');
      });

      element.bind('click', function() {
        // Makes http call to get versions
        scope.getVersions();

        // Highlight clicked element
        angular.element(document.querySelector('.clicked')).removeClass('clicked');
        element.addClass('clicked');
        // Create the collapse element or select existing one

        var collapseQuery = document.querySelector('#collapse');
        if (collapseQuery !== null) 
          angular.element(collapseQuery).remove();

        var collapse = angular.element('<div id="collapse" ng-hide="$parent.hideVersions" class="col-md-12 col-xs-12"> \
              <div class="inner"> \
                <ul> \
                  <li class="title">{{release.title}}</li> \
                  <li class="row top"> \
                    <div class="col-md-1 col-sm-1 col-xs-2">Year</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">Format</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">Label</div> \
                    <div class="col-md-2 col-sm-2 col-xs-2">Country</div> \
                    <div class="col-md-2 col-sm-2 hidden-xs">Cat. Nº</div> \
                  </li> \
                  <li class="row" ng-show="versions" ng-repeat="version in versions | filter: \'!file\' | orderBy: \'released\'"> \
                    <div class="col-md-1 col-sm-1 col-xs-2">{{(version.released | release:4) || \'-----\'}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">{{version.format}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">{{version.label}}</div> \
                    <div class="col-md-2 col-sm-2 col-xs-2">{{version.country}}</div> \
                    <div class="col-md-2 col-sm-2 hidden-xs">{{version.catno}}</div> \
                  </li> \
                  <li class="row" ng-hide="!release.format"> \
                    <div class="col-md-1 col-sm-1 col-xs-2">{{singleversion.year}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-4">{{singleversion.formats[0].name}}</div> \
                    <div class="col-md-3 col-sm-3 col-xs-3">{{singleversion.labels[0].name}}</div> \
                    <div class="col-md-2 col-sm-2 col-xs-2">{{singleversion.country}}</div> \
                    <div class="col-md-2 col-sm-2 hidden-xs">{{singleversion.labels[0].catno}}</div> \
                  </li> \
                </ul> \
              </div> \
            </div>')

        // Based on the position of the clicked element calculate the rounded number up to the nearest multiple of four

        if ($(window).width() < 768)
          {
          var calculatedPosition = Math.ceil(scope.position / 2) * 2;
          }
        else
          {
          var calculatedPosition = Math.ceil(scope.position / 4) * 4;
          };

        // Get the element at the calculated position or the last one
        var calculatedQuery = document.querySelector('[position="' + calculatedPosition + '"]');
        if (calculatedQuery === null)
          calculatedQuery = document.querySelector('[last="true"]');

        var calculatedElement = angular.element(calculatedQuery);

        // Insert the collapse element after the element at the calculated position
        calculatedElement.after(collapse);

        // Highlight the calculated element
        angular.element(document.querySelector('.calculated')).removeClass('calculated');
        calculatedElement.addClass('calculated');
        $compile(collapse)(scope);
      });
    }
  };
});

有关如何绑定2个元素以使指令消失的任何提示（以及从单击的元素中删除＆＃34;单击的＆＃34;类）？

干杯！

Answer 1

我的第一个提示是将所有javascript html移动到模板中并指定templateUrl in your directive。

我的第二个提示是查看此隔离范围和/或在模板html中指定控制器，以便您可以在模板中使用angular的指令和绑定（而不是依赖于jquery-fied js的东西）。

在AngularJS中使用指令绑定输入

1 个答案: