最終目標傳遞屬性值指令模板

我們希望有我們可以添加到我們會聯想到一個上下文幫助對話框上的任何元素的屬性，這樣，當我們將鼠標遊標移到元素，彈出窗口會顯示幫助信息。下面是我們想要做的一個例子：

<label help-info="This is what will be displayed in the help dialog">Help Example</label>

我遇到了一些麻煩正確地傳遞字符串參數模板雖然。

這是我已經試過：

的Index.html

<html ng-app="myApp"> 
    <head> 
    <script data-require="[email protected]*" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="HelpInfoDirective.js"></script> 
    </head> 

    <body ng-controller="myCtrl"> 
    <div help-info="test"></div> 
    </body> 
</html>

HelpInfoTemplate.html

<div> 
    {{'this is a' + _attrs.help-info}} 
</div>

HelpInfoDirective.js

(function(){ 
    var app = angular.module('myApp', []); 

    app.directive('helpInfo', function(){ 
    return{ 
     restrict: 'A', 
     scope: true, 
     templateUrl: function(_elements, _attrs){ 
     'HelpInfoTemplate.html' 
     } 
    // link: function(_scope, _elements, _attrs){ 
    // _scope.helpAttr = _attrs.help-info; 
    // } 
    } 
    }); 
})();

首先，我嘗試通過使用鏈接參數傳遞參數，它沒有工作，所以我嘗試將模板放入一個沒有運氣的函數。

將屬性值傳遞給模板的正確方法是什麼？另外，一旦我們有了價值，我們如何修改返回的模板，以便我們可以使用ng-show來顯示彈出窗口（我們將最終將它放置到模式中）。我接受建議。

鏈接到Plunk

來源

2015-04-29 Levi Fuller

你想要一個彈出窗口或工具提示嗎？ – jake

我們正在創建一個自定義彈出窗口來包裝字符串。我們正在計劃基於類似於之下的標題解析標題，但我們可以自己弄清楚。謝謝你的答案，夥伴。 –

什麼是將屬性值傳遞給模板的正確方法？

綁定值模板

值綁定到完成編譯過程模板。

app.directive('helpInfo', function($compile){ 
    return{ 
     restrict: 'A', 
     scope: {title : '@'}, 
     link: function(scope, el){ 
     var newElement = $compile('<div>{{title}}</div>')(scope); 
     el.hover(function(){ 
      el.after(newElement); 
     }); 

     el.mouseout(function(){ 
      el.nextAll().first().remove(); 
     }); 

     } 
    } 
    });

定義範圍內爲您的指令

你需要設置：您可以使用$compile服務，並提供範圍，模板需要綁定到你的指令的鏈接功能代碼編譯指令的隔離範圍指定了要在彈出窗口中定義文本的屬性名稱。在這個例子中，我使用'title'作爲屬性。

然後可以使用該指令是這樣的：

<div help-info title="I am a title">Click me</div>

演示

這裏有一個Plunker顯示這個動作。

http://plnkr.co/edit/VwdHC3l9b3qJ4PF6cGV1?p=preview

而且，一旦我們的價值，我們如何修改返回的模板，所以我們可以用NG-顯示以顯示彈出

在我提供我使用的示例jQuery hover（）和mouseout（）事件響應用戶懸停在DOM元素上方和遠離的元素。如果您想進一步瞭解，請參閱a tutorial，其中顯示瞭如何將彈出窗口或警報添加到服務中。

來源

2015-04-29 03:05:50 jake

爲了多走一步，並展示一個關於如何實現我們所需的翻車方法的例子，這裏就是勝利。謝謝，傑克！ –

你需要指定它是這樣的：

app.directive('helpInfo', function(){ 
    return{ 
     restrict: 'A', 
     scope: true, 
     template: '<div>{{helpAttr}}</div>', 
     link: function(_scope, _elements, _attrs){ 
     _scope.helpAttr = _attrs.helpInfo; 
    } 
    } 
    });

Demo

你可以用你自己的模板，並插入{{helpAttr}}綁定你需要的地方它。

來源

2015-04-29 03:03:55 tpie

傳遞屬性值指令模板

回答

綁定值模板

定義範圍內爲您的指令

演示

相關問題