Question

我已经坚持了几个小时（顺便说一句，我在JS / Angular方面不是特别好）并且也寻找答案，但无法找到出路，所以这是我的问题：我有一个函数，其目的是用其他东西替换它在文本中的括号之间发现的东西，问题是我认为函数在AngularJS之前运行，而我的文本由AngularJS调用（对不起，如果我有麻烦解释它在英语）。所以，我正在搜索之后如何执行fonction，或之前的Angular。以下是所需代码的部分

HTML：

<ul class="list">
    <li ng-repeat="prop in props" ng-class="cssPropState(prop.state)" ng-click="checkProp(prop)" replace-directive>
         <p class="txtProps">{{prop.value}}</p>
    </li>
</ul>

JS：

exo2.directive("replaceDirective", function(){
    return function (scope, elements, attrs){
            var mytext = document.getElementsByClass("txtProps");
            var pattern = /\[(.*?)\]/g;
            var results = mytext.firstChild.nodeValue.match(pattern);
            mytext = mytext.replace(results[0], "TEST1");
            mytext = mytext.replace(results[1], "TEST2");
    }
  }
)

该文本由{{prop.value}}调用，并且已包含括号。我的问题是结果返回总是为null，因为它无法找到文本，因为它还没有被Angular初始化。希望我的问题得到理解，并希望有人能够帮助我！

由于

Answer 1

尝试将replace-directive向下移动到<p id="txtProps">，如下所示：

<ul class="list">
    <li ng-repeat="prop in props" ng-class="cssPropState(prop.state)" ng-click="checkProp(prop)">
         <p id="txtProps" replace-directive>{{prop.value}}</p>
    </li>
</ul>

现在，link函数的元素是p元素，因此链接函数看起来像：

exo2.directive("replaceDirective", function($timeout){
    return function (scope, element, attrs){
        $timeout(function() {
            var mytext = element.html();
            var pattern = /\[(.*?)\]/g;
            var results = mytext.match(pattern);
            mytext = montext.replace(results[0], "TEST1");
            mytext = montext.replace(results[1], "TEST2");
            element.html(mytext);
        });
    }
});

Answer 2

更新：修改{{}}表达式中文本的最佳方法是使用过滤器。

您可以像这样定义一个过滤器：

exo2.filter('replaceFilter', function(){
    return function(input) {
       var pattern = /\[(.*?)\]/g;
       var result = input.match(pattern);
       var mytext;
       mytext = montext.replace(results[0], "TEST1"); // Here is something broken. montext is undefined. You need fix this.
       mytext = montext.replace(results[1], "TEST2");
       return mytext;
    }
});

然后，在html中使用过滤器

<ul class="list">
    <li ng-repeat="prop in props" ng-class="cssPropState(prop.state)" ng-click="checkProp(prop)">
        <p class="txtProps">{{prop.value | replaceFilter }}</p>
    </li>
</ul>

编译指令 replaceDirective 时。 ng-repeat指令尚未完成。所以你应该等待它的完成或者在$ watch执行中找到一个子元素。

exo2.directive("replaceDirective", function(){
    return function (scope, element, attrs){
        scope.$watch({
           var mytext = element.children('.txtProps'); // use class not id
           if(mytext.length) {
              var pattern = /\[(.*?)\]/g;
              var results = mytext.text().match(pattern);
              mytext = montext.replace(results[0], "TEST1");
              mytext = montext.replace(results[1], "TEST2");
              element.html(mytext);
           }
        });

    }
});

PS：你不应该在ng-repeat中使用id。 id在文档中应该是唯一的。

JS函数在AngularJS初始化之前执行

2 个答案: