工作时间自定义AngularJS指令

我在写一个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) {
                }
            }
            });

.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>{{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>

<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>

---

我面临的问题是，

范围工作

永远不会更新，无论我在输入框中键入什么，或者即使单击“取消单击”复选框。它保持不变，如下所示：

{“dt”：[]}

您必须将

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) {}
  };
})

.directive（'openhoursDay'，function（）{
返回{
范围：{
开放时间：“=”，
openhoursActive:“=”，//将引用的模型导入到我们的指令范围
openhoursFrom:“=”，
开放时间：“=”，
ngModel:“=”//这是ng模型
},
模板：{{openhoursDay.day}}
，
链接：函数（作用域、元素、属性、ctrl）{}
};
})

---

我已经创建了一个模拟你的情况。您可以查看。

ng model

用于输入字段。所以你在传递它，但你并没有真的用它做任何事。此外，您正在使用

=

读取传入的属性，但您可能打算使用

@

。我已经创建了一个演示如何让它工作

以下是指令：

.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) {
                }
            }
            });

.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>{{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>

<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>

---

传递给指令的值不是该数组的一部分

ng model

不会为指令中的其他参数在数组中自动创建对象。感谢您的解释。工作起来很有魅力。