Question

我已经继承了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);
    })
}

在元素加载后，我通过在组件底部加载的元素的ng-init中调用它来运行我的jquery函数，此方法有效-我的data.name字段中的初始值在其中插入了换行符合适的。

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

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

有人可以建议我最好的方法吗？谢谢

Answer 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

更新视图后，如何在某些文本上运行功能？

1 个答案:

用法