angularjs – 我可以使用具有隔离范围的ng模型吗?

前端之家收集整理的这篇文章主要介绍了angularjs – 我可以使用具有隔离范围的ng模型吗?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建简单的ui-datetime指令。它将JavaScript Date对象分成_date,_hours和_minutes部分。 _date使用jquery ui datepicker,_hours和_minutes – 数字输入。
angular.module("ExperimentsModule",[])
    .directive("uiDatetime",function () {
    return {
        restrict: 'EA',replace: true,template: '<div class="ui-datetime">' +
            '<input type="text" ng-model="_date" class="date">' +
            '<input type="number" ng-model="_hours" min="0" max="23" class="hours">' +
            '<input type="number" ng-model="_minutes" min="0" max="59" class="minutes">' +
            '<br />Child datetime1: {{datetime1}}' +
            '</div>',require: 'ngModel',scope: true,link: function (scope,element,attrs,ngModelCtrl) {
            var elDate = element.find('input.date');

            ngModelCtrl.$render = function () {
                var date = new Date(ngModelCtrl.$viewValue);
                var fillNull = function (num) {
                    if (num < 10) return '0' + num;
                    return num;
                };
                scope._date = fillNull(date.getDate()) + '.' + fillNull(date.getMonth() + 1) + '.' + date.getFullYear();
                scope._hours = date.getHours();
                scope._minutes = date.getMinutes();
            };

            elDate.datepicker({
                dateFormat: 'dd.mm.yy',onSelect: function (value,picker) {
                    scope._date = value;
                    scope.$apply();
                }
            });

            var watchExpr = function () {
                var res = scope.$eval('_date').split('.');
                if (res.length == 3) return new Date(res[2],res[1] - 1,res[0],scope.$eval('_hours'),scope.$eval('_minutes'));
                return 0;
            };
            scope.$watch(watchExpr,function (newValue) {
                ngModelCtrl.$setViewValue(newValue);
            },true);
        }
    };
});

function TestController($scope) {
    $scope.datetime1 = new Date();
}

jsfiddle

关于github:https://github.com/andreev-artem/angular_experiments/tree/master/ui-datetime

据我所知 – 创建新组件时的最佳做法是使用隔离镜像。

当我试图使用孤立的范围 – 没有什么工作。 ngModel。$ viewValue === undefined。

当我尝试使用新的范围(我的例子,不是很好的变体imho) – ngModel在新创建的范围上使用值。

当然,我可以通过“= expression”(example)创建具有孤立范围的指令并使用ngModel值。但是我认为使用ngModelController是一个更好的做法。

我的问题:

>我可以使用带隔离镜像的ngModelController吗?
>如果不可能有哪些解决方案更好地用于创建这样的组件?

替换范围:范围:您的第一个小提琴中的{datetime1:’= ngModel’}似乎工作正常 – fiddle.不幸的是,链接到您的“示例”小提琴坏了,所以我不知道你在那里尝试。

所以,看起来ngModelController可以和隔离范围一起使用。

这是一个较小的小提琴,它在HTML /视图中使用ng-model,一个隔离范围和$ setViewValue在链接功能fiddle中。

更新:我刚刚发现一些相当有趣的东西:如果隔离范围属性被赋予不同的名称 – 例如,说dt1而不是datetime1 – 范围:{dt1:’= ngModel’} – 它不再有效!我猜测当我们要求:’ngModel’时,ngModelController使用HTML /视图中的名称(即ng模型属性值)在隔离范围上创建一个属性。所以如果我们在对象散列中指定相同的名称,一切都很好。但是,如果我们指定了一个不同的名称,那么新的scope属性(例如,dt1)不与我们需要的ngModelController相关联。

这是一个updated fiddle

原文链接:https://www.f2er.com/angularjs/144819.html

猜你在找的Angularjs相关文章