Не удается вернуть / отобразить HTML из пользовательской директивы

Я довольно плохо знаком с директивами angular и пытаюсь создать простую директиву, которая отображает динамический html. Рассмотрим следующий HTML

<body ng-app="myApp" ng-controller="myCtrl">
    <my-directive></my-directive>
</body>

То, что я хотел бы достичь, является результатом

<span>My HTML<span>

Стиль:

span {
  color:blue;
}

Моя директива:

myApp.directive("myDirective", ['$sce', function($sce) {
  return {
    restrict: "E",
    scope: {
      text: "="
    },
    template: '{{test}}',
    replace: true,
    transclude: false,
    link: function(scope, element, attrs) {
        scope.test  = "<span>My HTML<span>";
    }
  }
}]);

Все мои попытки потерпели неудачу, вот мой пример кода, надеюсь, вы могли бы помочь мне с этим, потому что мне кажется, что я что-то упустил Кстати, я полагаю, причина в том, что это HTML, поэтому я попытался использовать $ sce, но все же безуспешно.

Отредактировано: я добавил стиль CSS для тега span, поэтому, как только он заработает, цвет текста должен быть синим.

Источник

1 ответ

Решение

Обычно вы привязываете переменные не к области действия директивы, а к области действия вашего контроллера. Постарайтесь по возможности избегать $scope, так как это лучшая практика.

Ваш index.html будет выглядеть так:

<body ng-app="myApp">
    <my-directive></my-directive>
</body>

Ваш контроллер:

myApp.controller("myCtrl", function() {
  var vm = this;
  vm.test = "Test";
});

И, наконец, ваша директива:

myApp.directive("myDirective", ['$sce', function($sce) {
  return {
    restrict: "E",
    template: '<span>{{vm.test}}</span>',
    replace: true,
    controller: "myCtrl",
    controllerAs: "vm"
  }
}]);

Обратите внимание, что ваша переменная "test" напрямую связана с контроллером. На контроллер ссылаются "controller" и "controllerAs" в вашей директиве.

Дайте мне знать, если это поможет вам.

РЕДАКТИРОВАТЬ: Если вы хотите присвоить значение переменной внутри метода ссылки, вы можете попробовать:

myApp.directive("myDirective", ['$sce', function($sce) {
  return {
    restrict: "E",
    scope: {
      text: "@"
    },
    replace: true,
    transclude: true,
    template: '<span ng-bind="text"></span>',
    link: function(scope, element, attrs){
        scope.text = "<span>...</span>";
    }
  }
}]);

Несколько вещей:

  • scope.text: "=" применяется только в том случае, если вы получили текстовую опору из элемента html
  • вместо этого используйте "@", если вы назначаете его внутри директивы
  • переменные, определенные внутри области видимости, ссылаются только по имени переменной, когда внутри шаблона
  • директивам всегда нужен один корневой элемент в шаблоне
  • вы можете использовать ng-bind или ng-bind-html (с вашим $sceProvider), чтобы связать ваш динамический html с этим корневым элементом
Источник
Другие вопросы по тегам