Angularjs-表示存储在$scope/model中的html和ng标记的指令

Angularjs - directive to present html and ng markup stored in $scope/model

本文关键字:ng html 指令 中的 model 存储 表示 scope Angularjs-      更新时间:2023-09-26

我的场景是,我需要呈现来自数据库的HTML内容。HTML内容包含表达式和特定于ng的属性/元素。我已经被引导进入指令领域,但我不确定如何实现这一点,因为我无法访问可以返回模板字段的$scope:

    var app = angular.module('app', []);

    app.directive('dataPresenter', function () {
        return {
            restrict: 'AE',
            replace: 'true',
            template: ???How_To_Access $scope.data or the value of ng-model???
        };
    });

    app.controller('Ctrl', function($scope) {
          $scope.field = true;
          $scope.data = "<b ng-if='field'>{{1+1}}</b>"                
     });

...
<div ng-controller="Ctrl">
   <data-presenter ng-model="data"></data-presenter>
</div>

如果可以创建一个隔离作用域,那么可以在指令定义中添加一个scope参数。scope参数用于定义应如何将数据传递给指令。

angularjs文档包括一个示例:http://plnkr.co/edit/ngdoc:example-example85@snapshot?p=预览