如何通过模型或某种字符串在angularjs指令？ [英] how to pass either a model or a string to a directive in angularjs?

问题描述

我的工作指令，其中的参数之一，它可以是一个模型（动态值），或有时一个字符串。

I'm working on a directive, where one of the parameters to it can either be a model (dynamic value) or sometimes a string.

我能做到这一点的唯一方法是使用 @ 。有没有更好的方式来做到这一点？

The only way I could do this was using @. Is there a better way to do this?

<my-directive foo="{{foomodel}}">
<my-directive foo="foostring">

在我的指导我使用的是分离范围：

In my directive I'm using an isolate scope:

scope: {
    foo: '@'
}

我试图只是字符串这样做的，也没有工作。

I tried doing this with just strings and it did not work.

推荐答案

阅读这些问题的答案似乎还有关于'='，之间的区别很大的混乱'和;'和@使用隔离范围时。你的目的，我会用＆放大器;如果你想的值是一个字符串或对象做的@pankajparkar不和用单引号包住字符串。

Reading these answers it seems there is much confusion about the differences between '=', '&' and '@' when using an isolated scope. For your purposes, I would use & and if you want the value to be a string or an object do as @pankajparkar does and encase strings in single quotes.

除非你需要在你的指令改变你的父范围中得到体现，不使用=。 '='隐式地设置在隔离范围内的财产的手表，如果它看到一个变化修改父作用域属性。手表是角相对昂贵的操作，并且要尽量减少他们。

Unless you need changes in your directive to be reflected in your parent scope, don't use '='. '=' implicitly sets a watch on the isolated scope's property and modifies the parent scope property if it sees a change. Watches are a relatively expensive operation in Angular, and you want to minimize them.

＆安培;不含蓄创建一个手表，它推迟了前pression的评价，当你调用创建范围功能。因为你并不需要双向绑定它非常适合你的情况。想想和放大器;为创建返回由分配给该属性的前pression产生的值的函数。

& does not implicity create a watch and it defers evaluation of the expression for when you call the created scope function. It is ideal for your case because you don't need two-way binding. Think of & as creating a function that returns the value generated by the expression assigned to the attribute.

app.directive("foo", function(){
  return {
    scope: {
      foo: "&"
    },
    template: "<span>{{foo()}}</span> | <span>{{typeof foo()}}</span>",
    link: function(scope){
        //so we don't have to set up a watch, I've just inlined the evaluation of the type
    }
  }
})

<div foo="model"></div>       <!-- test | string -->
<div foo="'text'"></div>      <!-- text | string -->
<div foo="5"></div>           <!-- 5 | number -->
<div foo="{a: 5}"></div>

@保留为要限制前pression插值的评价情况。插值角度都会导致一个字符串。如果你使用'@'，你的属性不是一个插值前pression（{{}}），范围属性的值将是属性的文本值。如果你的属性值是插入前pression，该属性的值将是前pression的插值（这将永远是一个字符串）。

@ is reserved for cases where you want to restrict evaluation of the expression to interpolation. Interpolation in angular ALWAYS results in a string. If you use '@' and your attribute is not an interpolation expression ({{}}), the value of the scope property will be the literal value of the attribute. If your attribute value is an interpolation expression, the value of the property will be the interpolated value of the expression (which will always be a string).

清除泥浆，对吧？

这篇关于如何通过模型或某种字符串在angularjs指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！