Question

我正在写一个angularJS指令来输入开放时间。类似于： enter image description here

这是指令：

.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永远不会更新我在输入框中键入的内容，或者即使click-unclick复选框也是如此。它保持不变为：{"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工作时间指令

2 个答案: