Question

我有这样的设置：

<controller>
   <directive>

在我的控制器中有一个返回html字符串的函数。如何通过访问控制器范围来获取我的指令？

或许我应该把控制器放在指令中？

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

    $scope.parseJson = function () {
      //returns the html
    };

}]);

指令

app.directive('Output', function () {
  return {
    restrict: 'A',
    replace: true,
    template: '<need html from controller>',
    link: function(scope, element, attr) {

        //render
        //scope.parseJson();
    }
  };
});

Answer 1

您应该使用隔离范围：'＆amp;'选项

app.directive('output', ['$sce', function ($sce) {
  return {
    restrict: 'A',
    replace: true,
    template: "<div ng-bind-html='parsed'></div>",
    scope:{
      output: "&"
    },
    link: function(scope){
      scope.parsed = $sce.trustAsHtml(scope.output());
    }
  };
}]);

模板：

<div output="parseJson()"></div>

Answer 2

指令和控制器应该已经共享范围。不要使用模板作为指令，只需在链接函数中获取HTML字符串（您已经在那里调用了方法）并使用element.html（）直接修改元素。有关详细信息，请查看element docs。

Answer 3

app.directive('Output', function ($compile) {
      return {
        restrict: 'A',
        link: function(scope, element, attr) {
            var templateString = scope.parseJson();
            var compiledTemplate = $compile(templateString)(scope);
            compiledTemplate.appendTo("TheElementYouWishtoAppendYourDirectiveTo");
        }
      };
    });

如何获取访问控制器范围的指令

3 个答案: