Question

我有一个带换行符分隔符和网址的文字：

first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com。

我想在按下ng-repeat按钮后更新copy值。

我有这个HTML：

<div ng-controller="myCntrl">
    <textarea ng-model="copy_note_value"></textarea>

    <button data-ng-click="copy()">copy</button>

    <div>
        <p ng-repeat="row in note_value.split('\n') track by $index"
           wm-urlify="row"
           style="display: inline-block;"
            >
        </p>
    </div>
</div>

控制器：

app.controller('myCntrl', function ($scope) {

     $scope.note_value = "first row\nFind me at http://www.example.com and also\n at http://stackoverflow.com";

     $scope.copy_note_value = angular.copy($scope.note_value);

    $scope.copy = function(){
      $scope.note_value = angular.copy($scope.copy_note_value);   
    }

});

我的指令应该采用文本并返回 urlfied 文本：

app.directive('wmUrlify', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        scope: true,
        link: function (scope, element, attrs) {

            function urlify(text) {
                var urlRegex = /(https?:\/\/[^\s]+)/g;
                return text.replace(urlRegex, function (url) {
                    return '<a href="' + url + '" target="_blank">' + url + '</a>';
                })
            }

            var text = $parse(attrs.wmUrlify)(scope);
            var html = urlify(text);
            element[0].inneHtml(html)

        }
    };
}]);

以下是一个流程：用户更改textarea中的文字并按下copy按钮。我希望在ng-repeat中显示更改。

仅当我添加新行而不是行内容时才有效。

这里有什么问题？这是我的Fiddle

Answer 1

只需从track by $index中删除ng-repeat即可。这是因为您告诉Angular note_value.split('\n')的值只有在$index发生变化后才会更改，即在按新行分割后数组的大小。

但track by的默认实现是每个项目的标识。因此，当您更改默认实现以通过$index跟踪它时，当您不是添加新行而只是更新任何现有行的内容时，Angular无法检测到存在更改。< / p>

<强>更新

当拆分后存在相同的值时，删除track by $index函数将引发异常。所以你可以使用一个简单的函数:(在你的控制器中定义它）

$scope.indexFunction = function($index, val) {
    // Creating an unique identity based on the index and the value
    return $index + val;
};

然后在ng-repeat中使用它：

<p ng-repeat="row in note_value.split('\n') track by indexFunction($index, row)"></p>

https://docs.angularjs.org/api/ng/directive/ngRepeat

改变textarea模型后，指令不会触发

1 个答案: