Question

我在使用角度的双向绑定时遇到问题，当我更改输入时，更改dosnt会影响到控制器。但是第一个来自控制器的init影响指令。

图片中的

我更改了值，但vm.date仍然有值测试。

我的指示：

    (function (app) {
    app.directive('datePicker', function () {

        //Template
        var template = function (element, attrs) {

            htmltext =

                '<input ng-readonly="true" type="text" id="' + attrs.elementId +
                '" ng-model="' + attrs.model + '" type="date" />';

            return htmltext;

        }

        //Manipulation
        var link = function ($scope, elements, attrs, ctrls) {

            //Declare variables we need
            var el = '#' + attrs.elementId + '';
            var m = attrs.model;
            var jdate;
            var date;
            $scope[attrs.model] = [];

            $(el).on('change', function (v) {
                jdate = $(el).val();
                gdate = moment(jdate, 'jYYYY/jMM/jDD').format('YYYY-MM-DD');
                if (moment(gdate, 'YYYY-MM-DD', true).isValid()) {
                    date = new Date(gdate);

                    $scope[m][0] = date;
                    $scope[m][1] = jdate;
                    //console.log($scope[m]);
                    $scope.vm[m] = $scope[m];

                    console.log($scope.vm); //----> Here Console Write Right Data 

                } else {
                    //console.log('Oh, SomeThing is Wrong!');
                }

            }); 

        } // end of link
        return {
            restrict: 'E',
            scope: {vm: '='},
            template: template,
            link: link
        };

    });
}(angular.module('app')));

和我的控制员：

(function (app) {
    app.controller('test', ['$scope', function ($scope) {
        var vm = this;
        vm.date = 'test';
        vm.mydate = 'test2';
    }]);
}(angular.module('app')));

和html：

<body ng-app="app">

    <div ng-controller="test as vm">

        <date-picker element-id="NN" model="vm.date" vm="vm"></date-picker>
        <p>{{vm.date}}</p>

        <date-picker element-id="NN2" model="vm.mydate" vm="vm"></date-picker>
        <p>{{vm.mydate}}</p>

    </div>
</body>

Answer 1

我不确定为什么你把文本框作为readonly，但如果你删除readonly并尝试更新文本框，那么双向绑定工作。这是小提琴

https://fiddle.jshell.net/dzfe50om/

Answer 2

答案：

您的控制器具有日期属性，而不是vm.date属性。 - zeroflagL 5月25日13:48

Answer 3

您应该将vm定义为$ scope而不是此;

var vm = $scope;

如何将指令var绑定到控制器

3 个答案: