Question

我仍然不熟悉指令，所以请耐心等待。我的应用中有多个视图。现在，这些视图中的一些（但不是全部）使用另一个由几个日期/时间和数字输入字段组成的局部视图。我们称之为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..

}]）;

我正在寻找什么。试图在＆＃34;父母＆＃34;＆＃34;中定义指令的数据字段。像这样的控制器不起作用，但这样的事情是我想要实现的。

Answer 1

始终将您的指令编写为可在任何应用中使用的组件。他们不应该提供数据，他们应该用它来做些什么。您的视图控制器应该通过two-way binding向您的指令提供数据。

工作示例：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>

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

1 个答案:

view1.html

view1.controller.js

time.directive.js

time.controller.js

time.directive.html