指令中的值未定义

时间:2016-08-18 17:45:40

标签: angularjs

我试图在模型传递的Directive中获取一个值。它在控制器中打印值但在指令中它是未定义的。 附加代码段,请更新错误的位置。 非常感谢!!

A)日期& MODEL中的时间输入类型 -

// DATE-PICKER

<div class="todo-details-inline">
    <span class="todo-header">Due date</span>
    <input type="text" 
           ng-model="vm.task.end_date" 
           top="45" name="endDate" 
           class="nc-input" 
           pickadate-picker date-input-format>
</div>

// TIME-PICKER

<div style="margin-left:10%;" class="todo-details-inline">
    <input ng-model="vm.task.end_time" 
           name="endTime" 
           time-input-format 
           time-picker 
           taskEndDate="vm.endDate" 
           placeholder="End Time" 
           class="nc-input">
</div>

B) vm.endDate在控制器中设置

//页面加载

vm.endDate = vm.task.end_date;
logger.info('in activate,vm.endDate:'+vm.endDate); // prints correct value

// watch - on val update

vm.endDate = vm.task.end_date;
console.log("updated vm.endDate:"+vm.endDate);   // prints correct value

c)指令

angular
.module('app.layout')
.directive('timePicker', timePicker);

function timePicker($timeout) {
    var directive = {
        require: 'ngModel',
        scope: {
            from: '=',
            to: '@',
            format: '@',
            min: '=',
            initialTime: '=',
            selectTime: '=',
            taskEndDate:'='
        },
        link: function($scope, $element, $attrs, ctrl) {
          // OTHER CODE     

          $scope.$watch("taskEndDate", function(value) {
            console.log("taskEndDate value:"+value); // UNDEFINED ??
            if (value) {
                // FURTHER OPRTNs
            }
          }
        }
   };
}

1 个答案:

答案 0 :(得分:1)

在观看之前保留taskEndValue的本地副本...有时您会在实际获得值之前观察传递的值。

$scope.endDate = $scope.taskEndDate;
$scope.$watch("endDate", function(value) {
    console.log("taskEndDate value:"+value);
    if (value) {
           ....
   }
});

然后在链接中查看本地变量。

其次,输入标记中的taskEndDate是区分大小写的,这是错误的。

<input ng-model="vm.task.end_time" 
           name="endTime" 
           time-input-format 
           time-picker 
           task-end-date="vm.endDate" 
           placeholder="End Time" 
           class="nc-input">