Question

我有一个将某些字符串转换为链接（/）标记的指令。我在ng-repeat中使用this指令来添加s列表中的文本链接。但是，我从覆盖ng-repeat数组的服务器刷新此数据。列表在DOM中更新，但文本中的链接不再像指令处理时那样。如何使指令重新处理文本以添加链接？

以下相关代码

控制器HTML

<div ng-repeat="post in posts track by $index" ng-if="!post.deleted">
    <div  class="post wrap" ng-click="openSinglePostView(post, $index)" >
        <div class="post-desc" linkify="twitter" ng-bind="post.desc"></div>         
    </div>
</div>

Controller JS

$scope.posts = [];

function refresh(){ 
    $http.get(Constants.GET_POSTS_URL, {params : paramObject})
    .then(function (response){
        $scope.posts = [];
        for(var i = 0; i < response.data.resultsArray.length; i++){
            var post = new PostFactory(response.data.resultsArray[i]);
            $scope.posts.push(post);
        }
    });
}

refresh();

指令代码

angular.module('linkify').directive('linkify', ['$filter', '$timeout', 'linkify', function ($filter, $timeout, linkify) {
    'use strict';

    return {
      //restrict: 'A',
      link: function (scope, element, attrs) {
        var type = attrs.linkify || 'normal';
        $timeout(function () { element.html(linkify[type](element.html()));
        });

      }
    };
  }]);

并且作为参考，该指令使用这些过滤器和工厂

angular.module('linkify')
  .filter('linkify', function (Constants) {
      'use strict';

      function linkify (_str, type) {
        if (!_str) {
          return;
        }

        var _text = _str.replace( /(?:https?\:\/\/|www\.)+(?![^\s]*?")([\w.,@?!^=%&amp;:\/~+#-]*[\w@?!^=%&amp;\/~+#-])?/ig, function(url) {
          var wrap = document.createElement('div');
          var anch = document.createElement('a');
          anch.href = url;
          anch.target = "_blank";
          anch.innerHTML = url;
          wrap.appendChild(anch);
          return wrap.innerHTML;
        });

        // bugfix
        if (!_text) {
          return '';
        }

        // Twitter
        if (type === 'twitter') {
          _text = _text.replace(/(|\s)*@([\u00C0-\u1FFF\w]+)/g, '$1<a href="https://twitter.com/$2" target="_blank">@$2</a>');
          _text = _text.replace(/(^|\s)*#([\u00C0-\u1FFF\w]+)/g, '$1<a href="https://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
        }

        return _text;
      }

      //
      return function (text, type) {
        return linkify(text, type);
      };
  })
  .factory('linkify', ['$filter', function ($filter) {
    'use strict';

    function _linkifyAsType (type) {
      return function (str) {(type, str);
        return $filter('linkify')(str, type);
      };
    }

    return {
      twitter: _linkifyAsType('twitter'),
      icon: _linkifyAsType('icon'),
      normal: _linkifyAsType()
    };
  }])

Answer 1

$ index的曲目可能成为问题吗？没有它你试过吗？

更新阵列后，ng-repeat中的指令不会重新处理

1 个答案: