Angular 指令构建一个选择具有未定义

angular directive building a select has undefined

本文关键字：选择 一个 未定义 指令 构建 Angular      更新时间：2023-09-26

我正在尝试了解角度指令，基本上，我想要构建的指令是一个简单的html选择构建器，带有一些预定义的选项。这很好用。

但是我无法弄清楚的是，如何使用预先选择的选项加载指令，但也将选择分配给任何特定$scope.下面的代码段有效，但您需要预先确定指令中的$scope名称，而不是通过指令属性动态确定。

目前选择绑定到 ngSelectDayMonth.day ，这没关系，但如果您可以动态选择，以更好地适应任何控制器，它会更灵活。例如，在下面的代码段中，将值分配给$scope.form_data 

var myApp = angular.module('myApp', []);
myApp.controller('dates', ['$scope',
  function($scope) {
    $scope.form_data = {};
    $scope.ngSelectDayMonth = {
      day: 5,
      dayChange: function() {
        alert($scope.ngSelectDayMonth.day);
      }
    };
  }
]);
myApp.directive('ngSelectDayMonth', function() {
  return {
    restrict: 'E',
    controller: function($scope) {
      $scope.days = [];
      for (var i = 0; i <= 31; ++i) {
        $scope.days.push(i);
      }
    },
    template: '<select ng-model="ngSelectDayMonth.day" ng-change="ngSelectDayMonth.dayChange()"><option ng-repeat="day in days" value="{{day}}">{{day}}</option></select>'
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="ng-scope" ng-app="myApp">
  <div ng-controller="dates">
    <ng-select-day-month ng-model-day="ngSelectDayMonth.day"></ng-select-day-month>
  </div>
</div>

使指令可重用并设置预定义值的一种方法是使用具有独立作用域和链接函数的双向绑定：

var myApp = angular.module('myApp', []);
myApp.controller('ctrl1', ['$scope',
  function($scope) {
    $scope.formData1 = {};
    $scope.startingValue = 3;
  }
]);
myApp.controller('ctrl2', ['$scope',
  function($scope) {
    $scope.formData2 = {start:{}, end:{}};
  }
]);
myApp.directive('ngSelectDayMonth', function() {
  return {
    restrict: 'E',
    scope: {
      startingValue: "=",
      selected: "=day" 
    },
    controller: function($scope) {
      $scope.days = [];
      for (var i = 0; i <= 31; ++i) {
        $scope.days.push(i);
      }
    },
    link: function(scope) {
      scope.selected = scope.startingValue;
    },
    template: '<select ng-model="selected" ng-options="day for day in days">{{day}}</select>'
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <h3>controller 1</h3>
  <div ng-controller="ctrl1">
    <ng-select-day-month day="formData1.day" starting-value="startingValue"></ng-select-day-month>
    {{ formData1 }}
  </div>
  <h3>controller 2</h3>
  <div ng-controller="ctrl2">
    <ng-select-day-month day="formData2.start.day"></ng-select-day-month>
    {{ formData2.start }}
    <ng-select-day-month day="formData2.end.day" starting-value="10"></ng-select-day-month>
    {{ formData2.end }}
  </div>
</div>

相关文章：