Question

如何使用checkType属性以scope.countFrom = sseHandler.broadcastStamp[checkType];的方式解析？我这样做，所以我可以插入值，并使指令可重用。

现在我得到ReferenceError: checkType is not defined

angular.module('monitorApp')
.directive("countDown", [ 'sseHandler', function (sseHandler) {
    return {
        restrict: 'E',
        scope: {
            countFrom: "=",
            checkType: "@"
        },
        template :  '<div class="btn btn-block btn-inverse" id="api-time">'+
            'Next update in &nbsp <span class="info-test">{{countFrom}}</span>'+ 
            '&nbsp seconds',

        link: function(scope){
           scope.countFrom = sseHandler.broadcastStamp.cpuResult || "initializing";
           scope.$on('ONE_SEC', function() {
               if (sseHandler.broadcastStamp.cpuResult < -3) {
                   scope.countFrom = "Snap! Broadcast is late." +
                                     " Something is broke";
               }
               else if (sseHandler.broadcastStamp.cpuResult <0) {
                   scope.countFrom = "running a little late";
               } else {
                   //THIS IS WHERE I AM TESTING IT AT
                   scope.countFrom = sseHandler.broadcastStamp[checkType];
               }
           });
        }
    }
}]);

<count-down count-from="countDownTicker" check-type="cpuResult"></count-down>

Answer 1

尝试：

 link: function(scope, element,attr) {
        ...
        scope.countFrom = $parse('sseHandler.broadcastStamp.' + attr.checkType)({sseHandler: sseHandler});
 });

请记住将$ parse注入指令函数。

Answer 2

在我得到答案之前，我会让你知道隔离范围是什么/如何工作。

AngularJS指令有3种类型的隔离范围。

scope: {
    isolated1: '@attribute1',
    isolated2: '=attribute2',
    isolated3: '&attribute3'
}

<强> 1。使用@

对属性进行插值

@符号表示AngularJS应插入属性的值，并在更改时更新隔离的范围属性。插值与{{}}花括号一起用于使用父范围中的值生成字符串。

<强> 2。使用=

将数据绑定到属性

=符号表示AngularJS应将表达式保留在指定属性中，隔离范围上的值保持同步。这是双向数据绑定，允许对象和值直接映射到directive的内部和外部。

第3。使用&

在属性中提供回调表达式

&符号表示元素属性中提供的表达式将作为函数在作用域上可用，在调用时，执行表达式时。这对于从directive创建回调非常有用。

对于您的情况，由于您使用的是@表示法，因此常见的错误是期望插值对象成为对象本身。 插值始终返回字符串。

因此，如果你有一个object，假设用户有一个名为userName的字段，那么{{user}}的插值会将user对象转换为字符串，你会无法访问字符串上的userName属性。

Angular-将属性传递给指令并将其用作对象的属性名称

2 个答案: