带有可选范围值的指令和使用html中的文字设置的难度

时间:2013-07-24 20:49:32

标签: javascript angularjs angularjs-directive

新角度。试图了解正确的做事方式

我正在尝试创建一个指令,当用户在移动到下一页之前单击链接时,该指令将运行自定义逻辑。但是,在我甚至可以使用自定义逻辑之前,我在设置指令时遇到了困难。我希望能够:

A)指令上的某些属性是可选的(在某些情况下设置为不同的默认值)

B)让用户能够将字符串文字或来自控制器范围的变量传递到指令的范围内使用的指令属性。

我的问题:

1。)如果我在指令的属性中使用字符串文字,则相应的$ scope属性是未定义的。我必须通过$ attrs访问它。这不是最糟糕的事情,但似乎是一个错误的做法,必须检查$ scope.Prop,如果它是未定义检查$ attrs.Prop。

2。)另外,this answer似乎说我在属性中使用字符串文字时需要使用单引号,但该行为在我的示例中不起作用。

3。)当我没有设置指令的某些属性时,我在指令的'controller'函数中的$ scope上设置的默认值在渲染时不会反映出来。我无法弄清楚原因。

Code in Plnkr

任何帮助将不胜感激!

2 个答案:

答案 0 :(得分:4)

Here是一个所有三种情况都有效的版本:

  1. 文字没有任何特殊的工作
  2. 范围值使用通常的{{ expression }}语法
  3. 默认值使用我在this thread中找到的href='{{strHref || 'default href'}}'语法在指令的模板中提供。
  4. 这是完整的指令定义:

    return {
        restrict: 'E',
        replace: true,
        scope: {
            strHref: '@link',
            strText: '@displayText',
        },
        template: '<div><div>variables: {{strHref || \'default href\'}}, {{strText || \'default text\'}}</div> result: <a href="{{strHref || \'default href\'}}">{{strText || \'default text\'}}<span ng-show="blnIsBackButton"> (Return)</span></a></div>',
    
    }; 
    

    链接:http://plnkr.co/edit/RB6shHI0xYa1FkP4eXDy

答案 1 :(得分:0)

范围&amp;可用于文字/表达。 Scope =用于设置2路绑定,scope =用于方法调用。 如果需要,可以在控制器中为属性设置默认值

我认为指令名称必须是小写。有人能证实吗?如果我使用pageLink它不起作用,但适用于pagelink。 (注意'L')。财产相同。

http://www.egghead.io/中有一些关于范围的精彩视频。

我在Plunker中创建了它,它使用了所有3种范围的隔离类型