最终目标传递属性值指令模板

我们希望有我们可以添加到我们会联想到一个上下文帮助对话框上的任何元素的属性，这样，当我们将鼠标游标移到元素，弹出窗口会显示帮助信息。下面是我们想要做的一个例子：

<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

传递属性值指令模板

回答

绑定值模板

定义范围内为您的指令

演示

相关问题