自定义 AngularJS 工作时间指令

Question

我正在写一个 angularJS 指令来输入营业时间。类似于：

指令如下：

.directive('openhoursDay', function() {
            return {
                scope: {
                    openhoursDay:"=",
                    openhoursActive: "=", //import referenced model to our directives scope
                    openhoursFrom: "=",
                    openhoursTo: "="
                },
                templateUrl: 'templates/open_hours.html',
                link: function(scope, elem, attr, ctrl) {
                }
            }
            });

模板：

<div >
        <span>{{openhoursDay.day}}</span>
        <input type="checkbox" ng-model="openhoursDay.active"/>
        <input type="text" ng-model="openhoursDay.open"/>
        <input type="text" ng-model="openhoursDay.close"/>
        <br>
    </div>

HTML:

<div ng-model="work.dt[0]" openhours-day="Sun" openhours-active="active" openhours-from="from" openhours-to="to"></div>


<div ng-model="work.dt[1]" openhours-day="Mon" openhours-active="active" openhours-from="from" openhours-to="to"></div>

<div ng-model="work.dt[2]" openhours-day="Tue" openhours-active="active" openhours-from="from" openhours-to="to"></div>
        {{work}}

和控制器：

$scope.work={
                  dt:[]
                };

我面临的问题是，scope work 永远不会更新我在输入框中键入的任何内容，即使单击取消单击复选框也是如此。它保持不变：{"dt":[]}

Answer 1

您必须将 ng-model 属性传递给隔离范围，然后在模板中使用它，如下所示：

.directive('openhoursDay', function() {
  return {
    scope: {
      openhoursDay: "=",
      openhoursActive: "=", //import referenced model to our directives scope
      openhoursFrom: "=",
      openhoursTo: "=",
      ngModel: "=" // Here is the ng-model
    },
    template: '<div ><span>{{openhoursDay.day}}</span><input type="checkbox" ng-model="ngModel.openhoursDay.active"/><input type="text" ng-model="ngModel.openhoursDay.open"/><input type="text" ng-model="ngModel.openhoursDay.close"/><br> </div>',
    link: function(scope, elem, attr, ctrl) {}
  };
})

我创建了一个 Plunkr 来模拟您的情况。你可以看看。

Answer 2

ng-model 用于输入字段。所以你传递了它，但你并没有真正将它用于任何事情。此外，您正在阅读使用 = 传递的属性，但也许您打算使用 @。我创建了一个 plunkr 来演示如何让它工作。

指令如下：

.directive('openhoursDay', function() {
    return {
        scope: {
            model:"=",
            openhoursDay:"@",
            openhoursActive: "@", //import referenced model to our directives scope
            openhoursFrom: "@",
            openhoursTo: "@"
        },
        templateUrl: 'open_hours.html',
        link: function(scope, elem, attr, ctrl) {
          scope.model = {};
          scope.model.day = scope.openhoursDay;
          scope.model.active = scope.openhoursActive;
          scope.model.open = scope.openhoursFrom;
          scope.model.close = scope.openhoursTo;
        }
    }
})

模板：

<div >
    <span>{{model.day}}</span>
    <input type="checkbox" ng-model="model.active"/>
    <input type="text" ng-model="model.open"/>
    <input type="text" ng-model="model.close"/>
    <br>
</div>

HTML:

<div model="work.dt[0]" openhours-day="Sun" openhours-active="active" openhours-from="from" openhours-to="to"></div>
  <div model="work.dt[1]" openhours-day="Mon" openhours-active="active" openhours-from="from" openhours-to="to"></div>
  <div model="work.dt[2]" openhours-day="Tue" openhours-active="active" openhours-from="from" openhours-to="to"></div>
  work:{{work}}

和控制器：

.controller('MainController', ['$scope', function($scope){
      $scope.work={
        dt:[]
      };
}])

自定义 AngularJS 工作时间指令

Custom AngularJS Directive For Working Hours

angularjs

angularjs-directive