內部指令更換價值，而無需更換整個指令

我有我的指令，它包含一個名爲content一個範圍變量的模板：內部指令更換價值，而無需更換整個指令

<div class="directive-view"> 
    <span class="directive-header">My Directive</span> 
    {{content}} 
</div>

我有以下指令：

(function() { 
    "use strict"; 

    angular 
     .module('myApp.myDirective', []) 
     .directive("myDirective", myDirective); 

    function myDirective($compile) { 
     return { 
      restrict: 'E', 
      scope: { 
      }, 
      templateUrl:'../partials/directives/my-directive.html', 
      controller: function($scope) { 
       $scope.content = "<span>Some HTML &mdash; some more HTML</span>"; 
      }, 
      link: function (scope, element, attrs, ctrl) { 
       var compiledContent = $compile(scope.content)(scope); 
       scope.content = compiledContent; 
      } 
     }; 
    } 
})();

我期待什麼代替{{content}}是：

Some HTML — some more HTML

我看到的有反而是：

{"0":{"ng339":23},"length":1}

如何將範圍字符串的值設置爲某個初始值，然後更新它從向鏈路，當指令編譯內（如編譯的HTML）？

來源

2016-03-05 Alex Reynolds

你想排序佔位符，直到內容的解決和更換？ – dfsq

一個小小的改正，它應該是'app.directive（'myDirective'）'而不是'app.directive（'my-directive'）' –

我想在編譯'{{content}}'鏈接「部分的指令。我似乎無法找出一種方法來取代「{{content}}」而不是所有的東西。 –

這裏的工作plunker.

首先第一件事情，變化：

.directive('my-directive')

到

.directive('myDirective')

而且，從我收集的，你想要的HTML嵌入你的指令模板在編譯時使用駐留在指令中的範圍變量。您不需要$compile。

對於這一點，你需要使用ngBindHtml如下：

HTML：

<div class="directive-view"> 
    <span class="directive-header">My Directive</span> 
    ><div ng-bind-html="trustAsHtml(content)"></div> 
</div>

指令：

function myDirective($compile, $sce) { 
    return { 
     restrict: 'E', 
     scope: { 
     }, 
     template: '../partials/directives/my-directive.html', 
     controller: function($scope) { 
      $scope.content = "<span>Some HTML &mdash; some more HTML</span>"; 
     }, 
     link: function (scope, element, attrs, ctrl) { 


      scope.trustAsHtml = function(val) { 
       return $sce.trustAsHtml(val); 
      } 
     } 
    }; 
}

來源

2016-03-05 08:15:41

聽起來像你想要某種佔位符文本/ html代替content綁定，直到它解決和應用。在這種情況下，你會更好地解決它的模板：

<div class="directive-view"> 
    <span class="directive-header">My Directive</span> 
    <span ng-bind-html="content">Some HTML &mdash; some more HTML</span> 
</div>

_{而雅，.directive("my-directive", myDirective);應該是.directive("myDirective", myDirective);，但我想這僅僅是錯字。}

來源

2016-03-05 08:06:10 dfsq

如果我將任何HTML放入'content'的新值，那麼這是行不通的。這個：'scope.content = $ compile（「foo」）（scope）;'把字符串'[[object HTMLElement]]'放在'content'舊值的位置。 –

你爲什麼要編譯它？只需設置新的scope.content值。 – dfsq

如果我設置'scope.content =「foo」'那麼該字符串不會被格式化爲HTML。我看到字符串'foo'而不是** foo **。 –

內部指令更換價值，而無需更換整個指令

回答

相關問題