Angular指令:立即访问指令数据

斯科特

我还是新手,请多多包涵。我的应用程序中有多个视图。现在,这些视图中的一些(但不是全部)使用了另一部分视图,该视图由一些日期/时间和数字输入字段组成。我们将其称为time.html。这个time.html部分视图具有自己的控制器,该控制器具有一组用于处理数据字段的功能。

time.html:

<div>
    <input type="radio" data-ng-model="data.timeOptions" data-ng-value="true">Time Span
    <input type="radio" data-ng-model="data.timeOptions" data-ng-value="false">Ticker
    <fieldset data-ng-if="data.timeOptions">
        <label>Start:
            <input id="startDate"
                   type="date"
                   data-ng-model="data.startDate">
            <input id="startTime"
                   data-data.start-time
                   type="time"
                   data-ng-model="data.startTime">
        </label>
        <label>End:
            <input id="endDate"
                   type="date"
                   data-ng-model="data.endDate">
            <input id="endTime"
                   data-data.end-time
                   type="time"
                   data-ng-model="data.endTime">
        </label>
    </fieldset>
    <fieldset data-ng-if="!data.timeOptions">
        <label>Ticker Interval (min):
            <input class="ticker"
                   type="number"
                   step="1"
                   data-ng-model="data.tkrIntrvl">
        </label>
        <label>Refresh every (s):
            <input class="ticker"
                   type="number"
                   step="1"
                   data-ng-model="data.refresh">
        </label>
    </fieldset>
</div>

这里有两个不同的字段集,用单选按钮分隔。第一个是日期/时间字段集,它由开始日期,开始时间,结束日期和结束时间组成。第二个是数字行情指示器字段集,我将不对其进行详细介绍,但只知道它在那里。我写了一个非常基本的指令,将该局部视图添加到我需要的任何视图中:

.directive("timeDirective", function() {
    return {
      restrict: 'A',
      templateUrl: 'partials/time.html',
      controller: 'TimeCtrl',
      scope: false,
      transclude: false
    };
});

例如,我将此指令添加到另一个视图。我们将其称为view1.html:

<div>
    <h1>View1</h1>
    <form name="form" novalidate>
        <div data-time-directive></div>
        <input type="text" data-ng-model="data.model1">
        <input type="text" data-ng-model="data.model2">
        <input type="text" data-ng-model="data.model3">
    <button data-ng-click="someFunction(data)">Do Things</button>
     </form>
</div>

现在设置已不复存在,我遇到了两个问题

首先是日期/时间和数字字段都需要在使用它们的每个视图上都初始化为不同的值。如果我在TimeCtrl控制器中初始化它们,则所有使用此伪指令的视图都将初始化为相同的日期/时间和代码值。我需要在逐个视图的基础上对其进行初始化。

第二个问题是相似的。在初始化它们之后,我需要立即能够访问日期/时间和股票行情指标值,并将它们存储在指令的“父”控制器中的另一个$ scope变量中。在此示例中,它是view1.html的控制器。

像这样的东西:

app.controller('View1Ctrl', ['$scope', function($scope) {
               //Initializing directive data fields
               $scope.data = [];
               $scope.data.tkrIntrvl = 10;
               $scope.data.refresh = 60;
               var ed = new Date();
               var dms = ed.getTime();
               var sd = new Date(dms - 1800000); //1,800,000ms = 30 min
               $scope.data.startDate = sd;
               $scope.data.endDate = ed;
               $scope.data.startTime = sd;
               $scope.data.endTime = ed;

               $scope.someOtherObject.startDate = $scope.data.startDate;
               $scope.someOtherObject.endDate = $scope.data.endDate; //etc..

}]);

这就是我要的东西。像这样试图在“父母”控制器中定义指令的数据字段是行不通的,但是这种方式是我想要实现的。

肖恩·斯科维尔(Shaun Scovil)

始终将指令编写为可在任何应用程序中使用的组件。他们不应该提供数据,而应该使用数据。您的视图控制器应该通过双向绑定为指令提供数据

工作示例:JSFiddle

view1.html

<div ng-controller="View1Ctrl as vm">
  <h1>View1</h1>
  <form name="form" novalidate>
    <div time-directive config="vm.data"></div>
    <input type="text" ng-model="vm.data.model1">
    <input type="text" ng-model="vm.data.model2">
    <input type="text" ng-model="vm.data.model3">
    <button ng-click="vm.someFunction(vm.data)">Do Things</button>
  </form>
</div>

view1.controller.js

angular.module('myApp').controller('View1Ctrl', View1Ctrl);

function View1Ctrl() {
  //Initializing directive data fields
  var ed = new Date();
  var dms = ed.getTime();
  var sd = new Date(dms - 1800000); //1,800,000ms = 30 min
  var vm = this;

  vm.data = {};
  vm.data.tkrIntrvl = 10;
  vm.data.refresh = 60;
  vm.data.startDate = sd;
  vm.data.endDate = ed;
  vm.data.startTime = sd;
  vm.data.endTime = ed;

  vm.someOtherObject = {};
  vm.someOtherObject.startDate = vm.data.startDate;
  vm.someOtherObject.endDate = vm.data.endDate;

  vm.someFunction = function(data) {
    // Do Things
  };
}

time.directive.js

angular.module('myApp').directive('timeDirective', timeDirective);

function timeDirective() {
  return {
    bindToController: {
      data: '=config'
    },
    controller: 'TimeCtrl',
    controllerAs: 'vm',
    scope: true,
    templateUrl: 'partials/time.html'
  };
}

time.controller.js

angular.module('myApp').controller('TimeCtrl', TimeCtrl);

function TimeCtrl() {
  var vm = this;
}

time.directive.html

<input type="radio" ng-model="vm.data.timeOptions" value="span">Time Span
<input type="radio" ng-model="vm.data.timeOptions" value="ticker">Ticker
<fieldset ng-if="vm.data.timeOptions === 'span'">
  <label>Start:
    <input id="startDate" type="date" ng-model="vm.data.startDate">
    <input id="startTime" type="time" ng-model="vm.data.startTime">
  </label>
  <label>End:
    <input id="endDate" type="date" ng-model="vm.data.endDate">
    <input id="endTime" type="time" ng-model="vm.data.endTime">
  </label>
</fieldset>
<fieldset ng-if="vm.data.timeOptions === 'ticker'">
  <label>Ticker Interval (min):
    <input class="ticker" type="number" step="1" ng-model="vm.data.tkrIntrvl">
  </label>
  <label>Refresh every (s):
    <input class="ticker" type="number" step="1" ng-model="vm.data.refresh">
  </label>
</fieldset>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章