从该指令中删除$ watch

时间:2016-03-16 17:33:53

标签: angularjs optimization angularjs-directive

我写了这个指令来处理我的日期输入:https://plnkr.co/edit/7hpc8u5pVc7iaNSwn7Zw?p=preview

app.directive('myDate', ['$filter', myDate]);  

function myDate($filter) {
    var directive = {
        restrict: 'E',
        template: template,
        require: 'ngModel',
        scope: {},
        link: link
    }

    return directive;

    function template(element, attrs) {
        var template = '<input ng-model="date" ng-keyup="keyup($event.keyCode)" ui-mask="99/99/9999" type="text" ';

        if (attrs.class) {
            template += 'class="' + attrs.class + '"';
            element.removeClass(attrs.class);
        }

        template += '/>';

        return template;
    }

    function link(scope, element, attrs, ctrl) {
        scope.keyup = function(key) { 
            if (key === 68) { // D key
                scope.date = $filter('date')(new Date(), 'ddMMyyyy');
            }
        };

        ctrl.$formatters.push(function(data) { // model to view
            data = $filter('date')(data, 'ddMMyyyy');
            return data;
        });

        ctrl.$parsers.push(function(data) { // view to model
            var year = data.toString().substr(-4);
            var month = data.toString().substr(2, 2);
            var day = data.toString().substr(0, 2);
            var sep = '-';
            data = (year && month && day) ? Date.parse(year + sep + month + sep + day) : '';
            return data;
        });

        scope.$watch('date', function() {
            ctrl.$setViewValue(scope.date);
        });

        ctrl.$render = function() {
            scope.date  = ctrl.$viewValue;
        };
    }
}

不幸的是我用$ watch来保持我的模型更新...我想知道是否有更好的方法来触发$ setViewValue(scope.date)而不用$ watch;只是为了优化它。

谢谢!

1 个答案:

答案 0 :(得分:0)

将其添加到您的模板中:

ng-change="updateParent()"

这是给你的链接:

    scope.updateParent = function(){
      ctrl.$setViewValue(scope.date);
    }