通过Angularjs指令中的属性传递(Passing though an attribute in an Angularjs directive)

我正在使用一个指令，它只是freebase搜索小部件（jquery）的包装器。这是我尝试过的第一个指令，我遇到了一些问题。

期望的功能：1。能够传递语言（双字母代码）作为属性显示搜索结果2.能够指定在选择项目时调用的函数（从选择中传递数据）

我在这里设置了一个带有指令的plunkr 。第二部分功能正常，但我遇到了语言要求的问题，我不知道为什么。

传入语言代码时静态（非插值）工作正常：

if(attrs.lang){ language = attrs.lang; }

但是当我尝试传递这样的值时，我似乎无法使它工作：

attrs.$observe('lang', function(value) { if(value === ""){ language = 'en'; } else { console.log("lang val " + value); language = value; } });

知道为什么这不起作用吗？任何意见，将不胜感激。

目前的指令：

directive('suggest', function($http) { var language; return { restrict: 'E', template: "<input type='text'>", replace:true, scope:{ selectData:'=', onSelect:'&' }, link: function(scope, element, attrs) { attrs.$observe('lang', function(value) { if(value === ""){ language = 'en'; } else { console.log("lang val " + value); language = value; } }); if(attrs.lang){ language = attrs.lang; } $(element).suggest({ "lang": language }) .bind("fb-select", function(e, info) { console.log(info); scope.onSelect({data:info}); console.log("language: " + language); scope.$apply(function(){ console.log("hello apply here"); scope.selectData = info; }); }); } }; });

I'm working a directive that is just a wrapper for the freebase search widget (jquery). This is the first directive I've tried making and I'm running into some problems.

Desired functionality: 1. ability to pass in language (two letter code) for display search results as an attribute 2. ability to specify a function to be called when item is selected (passing through data from selection)

I've setup a plunkr with the directive here. The second bit of functionality works just fine, but I'm having trouble with the language requirement and I'm not sure why.

Passing in the language code works fine when doing it statically (not interpolated):

if(attrs.lang){ language = attrs.lang; }

But I can't seem to get it to work when trying to pass in the value like this:

attrs.$observe('lang', function(value) { if(value === ""){ language = 'en'; } else { console.log("lang val " + value); language = value; } });

Any idea why this is not working? Any advice would be appreciated.

The directive as it stands:

directive('suggest', function($http) { var language; return { restrict: 'E', template: "<input type='text'>", replace:true, scope:{ selectData:'=', onSelect:'&' }, link: function(scope, element, attrs) { attrs.$observe('lang', function(value) { if(value === ""){ language = 'en'; } else { console.log("lang val " + value); language = value; } }); if(attrs.lang){ language = attrs.lang; } $(element).suggest({ "lang": language }) .bind("fb-select", function(e, info) { console.log(info); scope.onSelect({data:info}); console.log("language: " + language); scope.$apply(function(){ console.log("hello apply here"); scope.selectData = info; }); }); } }; });

最满意答案

从你的问题不清楚，但我认为你的意思是以下问题：在plunker演示中我输入'fr'到语言，然后输入一些东西来建议框，它会获得'en'语言的结果。

这是因为您已经使用默认语言（en）初始化了建议插件。提供给$observe函数的函数不会在这里调用 - 稍后将在初始化指令后调用它。所以当语言改变时你需要重新初始化suggest插件。

我不确定这样做的正确方法是什么，因为我不熟悉该插件，但至少以下更改正在工作 - 只需将重新初始化添加到$observe侦听器：

attrs.$observe('lang', function(value) { console.log("lang val " + value); language = value; $(element).suggest({lang: language}); });

It is not clear from your question, but I think you mean the following problem: when in plunker demo I type 'fr' to the language and then enter something to suggest box it gets results for 'en' language instead.

This is because you already initialized suggest plugin with default language (en). The function provided to $observe function is not called right here - it will be called later, after your directive is initialized. So when language is changed you need to re-initialize the suggest plugin.

I'm not sure what is the correct way to do that as I'm not familiar with that plugin, but at least the following change is working - just added re-initialization to the $observe listener:

attrs.$observe('lang', function(value) { console.log("lang val " + value); language = value; $(element).suggest({lang: language}); });

更多推荐