Question

假设我有以下控制器。

 myApp.controller('sampleController', ['$scope','$http', $compile',function ($scope, $http, $compile) {

     $scope.name = 'vaibhav';
     var htmlString = '<div ng-controller="sampleController">
                         <p> {{name}} </p>
                       </div>';

     var element = angular.element(htmlstring).scope();
     var compiledom = $compile(element);

     console.log(compiledom); // I need parsed controller view here
 });

“compiledom”变量的最终输出应为：

<div ng-controller="sampleController">
    <p> vaibhav </p>
</div>

我需要使用已解析的控制器视图来创建另一个动态页面。

上面的代码有什么问题吗？请帮助我采取正确的方法。

Answer 1

实现这一目标的最佳方法是使用指令。

使该div成为指令的模板。 sampleController将是指令控制器，在这种情况下{{name}}将来自范围。

示例：<dynamic-page name='vaibhav'></dynamic-page>

指令的实现看起来像这样：

app.directive('dynamicPage', function() {
  return {
    restrict: 'E',
    scope: {
      name: '@'
    },
    controller: function($scope) {
      $scope.number = 10;
    },
    template: '<div><p>{{name}} + {{number}}</p></div>'
  }
});

Plunker：https://plnkr.co/edit/ElcJQBEsesi4JwYxRJ9T?p=preview `

Angularjs编译ng-controller html

1 个答案: