Угловая директива building select не определена

Question

Я пытаюсь разобраться с угловыми директивами, в основном директива, которую я хочу построить, - это простой 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>

Answer 1

Один из способов, чтобы сделать вашу директиву многоразовой и установить предварительно определенные значения, чтобы использовать два способа связывания с изолированным размахом и функция ссылка:

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>