视图更新后如何在某些文本上运行函数？答案

【问题标题】：How do I run a function on some text after the view is updated?视图更新后如何在某些文本上运行函数？
【发布时间】：2023-03-08 19:40:01
【问题描述】：

我继承了一个 angularJS 应用程序，但我不知道如何解决这个问题。

我的页面有一个元素表，其中包含使用 data-ng-bind 从模型附加的值。这些元素之一是 data.name：

<div class="component-name__plan_data_name" data-ng-bind="data.name">
&nbsp;
</div>

表格顶部有单选按钮可以在表格的不同视图之间切换，切换这些按钮会将表格视图更新为新数据

<input type="radio"
       data-ng-model="mobile.capacityContractMap[mobile.selectedCapacity]"
       data-ng-value="'{{contract}}'">

在 data.name 字段中的文本显示在视图中之前，我需要一个简单的操作来运行它。我想将 br 标记解释为换行符（但没有其他 html）。

为此我编写了一个非常简单的 jquery 函数：

function changeText() {
    elementstring = ".component-name__plan_data_name";
    toChange = "&lt;br&gt;"
    changeTo = "\<br\>"
    $(elementstring).each(function(){
        var text = $(this).html();
        var newtext = text.replace(toChange,changeTo);
        $(this).html(newtext);
    })
}

我在加载元素后运行我的 jquery 函数，方法是在我的组件底部加载的元素的 ng-init 中调用它，这很有效 - 我的 data.name 字段中的初始值在哪里应用了换行符合适。

我的问题是，当切换单选按钮、更改模型和更新 data.name 字段时，我无法运行该函数。我不确定解决这个问题的最佳方法。

我尝试在控制器中以多种方式使用 $scope.$listen。我试过在单选按钮上使用 ng-change 。我无法让任何一种方法起作用。

谁能告诉我最好的方法？谢谢

【问题讨论】：

标签： jquery angularjs

【解决方案1】：

使用custom directive：

app.directive("bindChangeText", function() {
    return {
        link: postLink,
    };
    function postLink(scope,elem,attrs) {
        scope.$watch(attrs.bindChangeText, function(value) {
            if (typeof value != "string") return;
            var toChange = "&lt;br&gt;"
            var changeTo = "\<br\>"
            var newtext = value.replace(toChange,changeTo);
            elem.html(newtext);
        });
    }
})

用法

<div class="component-name__plan_data_name"
     bind-change-text="data.name">
</div>

有关详细信息，请参阅

AngularJS Developer Guide - Creating Custom Directives

【讨论】：