Question

我是棱角分明的初学者。请帮我修复this plunk

我试图只使用一个回调用于onSelect回调jquery UI datepicker小部件，它位于我的控制器中，而不是在每个指令中重复回调函数（是的，为了实验，我确实有多个指令）。

但是我收到了这个错误

未捕获TypeError：无法使用'in'运算符在2016年10月19日搜索'onSelect'

这是我的代码

HTML

<html ng-app="myApp">
    <head>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css"/>
        <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
        <script src="script.js"></script>
    </head>
    <body ng-controller="myController">
        <input type="text" my-datepicker ng-model="date" date="date" on-select="onSelect()"/>
        <input type="button" ng-click="submitDate()" value="Submit"/>
    </body>
</html>

JS

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope){
    $scope.date = "frommyController";
    $scope.submitDate = function(){
        console.log($scope.date);
    };
    $scope.onSelect = function(value, picker){
        scope.date = value;
        scope.$parent.$digest();
    }
}]);
app.directive('myDatepicker', function(){
    return {
        scope: {
            date: "=",
            onSubmit: "&onSelect"
        },
        restrict: 'EA',
        require: "ngModel",
        link: function(scope, element, attributes, modelController){
            scope.date = "fromdirevtive";
            element.datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                onSelect: scope.onSubmit
            });
        }
    }
})

有人可以帮我理解我在这里做错了吗？

Answer 1

我使用你的plunkr创建了一个新的plunkr。请参阅此plunker以获取解决方案。

您的傻瓜发现的问题：

index.html中的方法签名不正确。
使用＆amp;调用回调的方式角度指令中的绑定。

我刚刚纠正了上述问题。此外，我没有使用链接功能，而是使用了指令的控制器，因为它在与指令的交互方面给了我更多的控制权。

在angular指令中调用回调的正确方法是将对象作为参数传递。对象的键应该是回调函数的参数。请参阅app.js的第27行

代码 - app.js

＆＃13;

var app = angular.module('myApp', []);
app.controller('myController', ['$scope',
  function($scope) {
    $scope.date = "frommyController";
    $scope.submitDate = function() {
      console.log($scope.date);
    };
    $scope.onSelect = function(value, picker) {
      console.log(value);
      console.log(picker);
      $scope.date = value;
      $scope.$parent.$digest();

    }
  }
]);
app.directive('myDatepicker', function() {
  return {
    scope: {
      date: "<",
      onSelect: "&"
    },
    restrict: 'EA',
    require: "ngModel",
    controller: function($scope, $element) {
      vm = this;
      vm.$scope = $scope;
      vm.onSelect = function(value, picker) {
        vm.$scope.onSelect({
          value: value,
          picker: picker
        })
      }

      $element.datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
        onSelect: vm.onSelect
      });

    }
  }
})


<html ng-app="myApp">

<head>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" />
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="myController">
  <input type="text" my-datepicker ng-model="date" date="date" on-select="onSelect(value,picker)" />
  <input type="button" ng-click="submitDate()" value="Submit" />
</body>

</html>

＆＃13;

Answer 2

您有两个选择

选项1：

在指令中调用您的回调函数，如下所示：

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope){
    $scope.date = "frommyController";
    $scope.submitDate = function(){
        console.log($scope.date);
    };
    $scope.onSelect = function(value, picker){
      alert('');
        scope.date = value;
        scope.$parent.$digest();
    }
}]);
app.directive('myDatepicker', function(){
    return {
        scope: {
            date: "=",
            onSubmit: "&onSelect"
        },
        restrict: 'EA',
        require: "ngModel",
        link: function(scope, element, attributes, modelController){
            scope.date = "fromdirevtive";
            element.datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                onSelect: function(){scope.$apply(function() {
                    scope.onSubmit();
                }); }
            });
        }
    }
})

选项2：

使用发布者/订阅者模型在父控制器中执行某些操作...如下所示

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope){
    $scope.date = "frommyController";
    $scope.submitDate = function(){
        console.log($scope.date);
    };

    $scope.$on('event',function()
    {
      alert('listener');
        scope.date = value;
        scope.$parent.$digest();
    });

}]);
app.directive('myDatepicker', function(){
    return {
        scope: {
            date: "="
        },
        restrict: 'EA',
        require: "ngModel",
        link: function(scope, element, attributes, modelController){
            scope.date = "fromdirevtive";
            element.datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                onSelect: function(){scope.$apply(function() {
                  console.log(scope)
                    scope.$emit('event')
                });}
            });
        }
    }
})

Answer 3

app.directive('myDatepicker', function(){
    return {
        scope: {
            date: "=",
            onSubmit: "&onSelect"
        },
        restrict: 'EA',
        require: "ngModel",
        link: function(scope, element, attributes, modelController){
            scope.date = "fromdirevtive";
            element.datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                onSelect:function(date) {

                scope.$apply(function() {
                    modelController.$setViewValue(date); 
                }); 
            }
            });
        }
    }
})

希望这对你有所帮助。

具有函数绑定的Angular datepicker指令

3 个答案: