使用 AngularJs 在 ng-bind-html 中观看 ng-model

Question

这是我的标记

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
    <p ng-bind-html="myText|unsafe"></p>
</div>

我正在使用这个代码

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>{{name}}</h1>";
    $scope.name="Habib";
});
app.filter('unsafe', function ($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

输出：

My name is: {{}}

期望输出：

My name is: Habib

我希望它也应该反映文本框中的值。

Answer 1

编辑

您在获取 $scope.name 绑定时遇到问题的原因是 ng-bind-html 没有将 html 绑定到当前范围。您可以使用指令来解决此问题。是解决您问题的答案。

Here 是一个添加指令并显示您正在寻找的行为的插件。

这是为解决您的问题而添加的指令：

app.directive('compileTemplate', function($compile, $parse){
   return {
       link: function(scope, element, attr){
           var parsed = $parse(attr.ngBindHtml);
           function getStringValue() {
                return (parsed(scope) || '').toString();
           }

            // Recompile if the template changes
            scope.$watch(getStringValue, function() {
                // The -9999 makes it skip directives
                // so that we do not recompile ourselves
                $compile(element, null, -9999)(scope);  
            });
        }
    }
});

您需要在 myText 范围变量之前声明 $scope.name="Habib"。

var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.name="Habib";
    $scope.myText = "My name is: <h1>{{name}}</h1>";
});
app.filter('unsafe', function ($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
   };
});

使用 AngularJs 在 ng-bind-html 中观看 ng-model

Watch ng-model in ng-bind-html using AngularJs

angularjs

angularjs-filter

watch

angularjs-ng-model

ng-bind-html