如何将模型或字符串传递给 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.

除非您需要更改指令以反映在您的父作用域中，否则不要使用=".'=' 隐式地在隔离作用域的属性上设置监视，并在看到更改时修改父作用域属性.Watches 是 Angular 中相对昂贵的操作，您希望将它们最小化.

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.

&不会隐式创建监视，并且会在您调用创建的作用域函数时推迟对表达式的评估.它非常适合您的情况，因为您不需要双向绑定.想想 &就像创建一个函数，该函数返回由分配给属性的表达式生成的值.

& 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>

@ 保留用于您希望将表达式的计算限制为插值的情况.角度内插总是会产生一个字符串.如果您使用@"并且您的属性不是插值表达式 ({{}})，则 scope 属性的值将是属性的字面值.如果您的属性值是插值表达式，则属性值将是表达式的插值值(始终是字符串).

@ 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屋！