在AngularJS中使用指令绑定输入

Question

我有一个指令，当单击 ng-repeat 列表中的元素时会出现一个指令。到目前为止，该指令没有切换，因此它仅在单击该项目时出现，并在单击 另一个 元素时销毁并重新创建。

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

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

这是我的过滤器：

<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 个元素以使指令消失（以及从被点击元素中删除“点击”类）的任何提示？

干杯！

Answer 1

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

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