Question

我想在变量中创建<select ng-model='selected' ng-options='stage as stage.name for stage in stages'></select>元素作为字符串。如您所见，select元素中有ng -...属性。如果我使用没有ng -...属性的select元素，它显示没有问题。如果我在里面使用ng -...它没有显示任何东西。那么，如何使用ng -...进行显示？请帮忙。

我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-sanitize.js"></script>
    <script src="Scripts/myScripts/index.js"></script>
</head>
<body>
    <div ng-app="myapp" ng-controller="myCtrl">
       <div ng-bind-html="htmlCode">
       </div>
    </div>
</body>
</html>

我的js代码：

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

app.controller('myCtrl', ["$scope", function ($scope) {

    $scope.stages =
        [{ name: "Identification of Discontinuing Factors", value: 1 },
        { name: "Project Level Assessment", value: 2 },
        { name: "Organizational Readiness Assessment", value: 3 }];

    $scope.htmlCode = "<select ng-model='selectedStage' ng-options='stage as stage.name for stage in stages'></select>";
}]);

Answer 1

您需要重新编译dom才能使用ng-属性。使用此指令作为ng-bind-html元素的属性。

.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

演示

＆＃13;

var app = angular.module('myapp', []);

app.controller('myCtrl', ["$scope","$sce", function ($scope,$sce) {

    $scope.stages =
        [{ name: "Identification of Discontinuing Factors", value: 1 },
        { name: "Project Level Assessment", value: 2 },
        { name: "Organizational Readiness Assessment", value: 3 }];

    $scope.htmlCode = "<select ng-model='selectedStage' ng-options='stage as stage.name for stage in stages'></select>";
    
    $scope.trust = function(html){
       return $sce.trustAsHtml(html)
    }
}]);

app.directive('dynamic', function ($compile) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.dynamic, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="myCtrl">
       <div ng-bind-html="trust(htmlCode)" dynamic>
       </div>
       
       {{selectedStage}}
    </div>

＆＃13;

如何使用ng -...属性绑定html代码

1 个答案: