Я хочу інкапсулювати свої поля форми в директиві, щоб я міг просто зробити це:
<div ng-form='myForm'>
<my-input name='Email' type='email' label='Email Address' placeholder="Enter email" ng-model='model.email' required='false'></my-input>
</div>
Як отримати доступ до myFormмоєї директиви, щоб я міг перевірити перевірку, наприклад myForm.Email.$valid?
Відповіді:
Щоб отримати доступ до FormController в директиві:
require: '^form',
Тоді він буде доступний як 4-й аргумент для вашої функції посилання:
link: function(scope, element, attrs, formCtrl) {
console.log(formCtrl);
}
Вам може знадобитися лише доступ до NgModelController, хоча:
require: 'ngModel',
link: function(scope, element, attrs, ngModelCtrl) {
console.log(ngModelCtrl);
}
Якщо вам потрібен доступ до обох:
require: ['^form','ngModel'],
link: function(scope, element, attrs, ctrls) {
console.log(ctrls);
}
'^form'а не з '^ngForm'? Я намагався змусити це працювати з першого разу, але це привело до помилки "немає контролера". Мені подобається ваша відповідь набагато більше, ніж моїй.
formабо, ng-formє formне ngForm. Мені знадобилося кілька спроб з’ясувати, що це ім’я form. Я думаю, що це вихідний код Angular, де ми бачимо, що formвін використовується.
scope.formCtrl = formCtrl;, то ви можете отримати доступ до нього в вашому контролері з допомогою $scope: controller: function($scope) { ... }. Однак зверніть увагу, що ваш контролер директив буде запускатися першим, тому посилання не буде там, коли функція контролера виконується вперше.
Ось повний приклад (стилізований за допомогою Bootstrap 3.1)
Він містить форму із кількома введеними даними (ім’я, електронна адреса, вік та країна). Ім'я, електронна пошта та вік - це директиви. Країна є "регулярним" входом.
Для кожного вводу відображається довідкове повідомлення, коли користувач не вводить правильне значення.
Форма містить кнопку збереження, яка вимикається, якщо форма містить хоча б одну помилку.
<!-- index.html -->
<body ng-controller="AppCtrl">
<script>
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
$scope.person = {};
});
</script>
<script src="inputName.js"></script>
<script src="InputNameCtrl.js"></script>
<!-- ... -->
<form name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<input-name ng-model='person.name' required></input-name>
</div>
<!-- ... -->
<div class="form-group">
<div class="col-sm-offset-2 col-sm-4">
<button class="btn btn-primary" ng-disabled="myForm.$invalid">
<span class="glyphicon glyphicon-cloud-upload"></span> Save
</button>
</div>
</div>
</form>
Person: <pre>{{person | json}}</pre>
Form $error: <pre>{{myForm.$error | json}}</pre>
<p>Is the form valid?: {{myForm.$valid}}</p>
<p>Is name valid?: {{myForm.name.$valid}}</p>
</body>
// inputName.js
app.directive('inputName', function() {
return {
restrict: 'E',
templateUrl: 'input-name.html',
replace: false,
controller: 'InputNameCtrl',
require: ['^form', 'ngModel'],
// See Isolating the Scope of a Directive http://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive
scope: {},
link: function(scope, element, attrs, ctrls) {
scope.form = ctrls[0];
var ngModel = ctrls[1];
if (attrs.required !== undefined) {
// If attribute required exists
// ng-required takes a boolean
scope.required = true;
}
scope.$watch('name', function() {
ngModel.$setViewValue(scope.name);
});
}
};
});
// inputNameCtrl
app.controller('InputNameCtrl', ['$scope', function($scope) {
}]);
Редагування 2: Я залишу свою відповідь, оскільки це може бути корисно з інших причин, але інша відповідь від Марка Райкока - це те, що я спочатку хотів зробити, але не зміг приступити до роботи. Очевидно, батьківський контролер тут буде form, ні ngForm.
Ви можете передати його, використовуючи атрибут у своїй директиві, хоча це буде досить багатослівно.
Ось робочий спрощений jsFiddle .
HTML:
<div ng-form="myForm">
<my-input form="myForm"></my-input>
</div>
Основні частини директиви:
app.directive('myInput', function() {
return {
scope: {
form: '='
},
link: function(scope, element, attrs) {
console.log(scope.form);
}
};
});
Ми попросили Angular прив'язати значення області, названу в formатрибуті, до нашої ізольованої області, використовуючи '='.
Робить це таким чином, відокремлює фактичну форму від директиви введення.
Примітка: Я намагався використовувати require: "^ngForm", але директива ngForm не визначає контролер і не може бути використана таким чином (що дуже погано).
З усього сказаного, я думаю, що це дуже багатослівний і брудний спосіб вирішити це. Можливо, вам було б краще додати нову директиву до елемента форми та використовувати requireдля доступу до цього елемента. Я подивлюсь, чи зможу я щось скласти.
Добре, ось найкраще, що я міг зрозуміти, використовуючи батьківську директиву, я поясню більше через секунду:
Робота jsFiddle з використанням батьківської директиви
HTML:
<div ng-app="myApp">
<div ng-form="theForm">
<my-form form="theForm">
<my-input></my-input>
</my-form>
</div>
</div>
JS (частково):
app.directive('myForm', function() {
return {
restrict: 'E',
scope: {
form: '='
},
controller: ['$scope', function($scope) {
this.getForm = function() {
return $scope.form;
}
}]
}
});
app.directive('myInput', function() {
return {
require: '^myForm',
link: function(scope, element, attrs, myForm) {
console.log(myForm.getForm());
}
};
});
Це зберігає форму в області батьківської директиви ( myForm) і дозволяє дочірнім директивам отримувати до неї доступ, вимагаючи батьківську форму ( require: '^myForm') та отримуючи доступ до контролера директиви у функції зв’язку (myForm.getForm() ).
Переваги:
Негативні:
Я намагався змусити його працювати, використовуючи атрибут елемента форми . Якщо це спрацювало, вам потрібно було б лише додати директиву до того самого елемента, що іngForm .
Однак я отримував якусь дивну поведінку із сферою дії, де myFormNameзмінна буде видно всередині $scope, але це буде undefinedтоді, коли я спробую отримати до неї доступ. Цей мене розгубив.
name="{{name1}}", і я ще не побачив відповіді на це.
Починаючи з AngularJS 1.5.0, для цього є набагато більш чисте рішення (на відміну від linkбезпосереднього використання функції). Якщо ви хочете отримати доступ до форм FormControllerу контролері директив вашого підкомпонента, ви можете просто вдарити requireатрибут директиви, наприклад:
return {
restrict : 'EA',
require : {
form : '^'
},
controller : MyDirectiveController,
controllerAs : 'vm',
bindToController : true,
...
};
Далі ви зможете отримати до нього доступ у своєму шаблоні або контролері директив, як і будь-яка інша змінна області, наприклад :
function MyDirectiveController() {
var vm = this;
console.log('Is the form valid? - %s', vm.form.$valid);
}
Зверніть увагу, що для того, щоб це працювало, вам також потрібно встановити bindToController: trueатрибут у вашій директиві. Див документацію для $compileі це питання для отримання додаткової інформації.
Відповідні частини з документації:
вимагати
Вимагати іншої директиви та вводити її контролер як четвертий аргумент функції зв’язування. Властивістю require може бути рядок , масив або об’єкт :
Якщо властивість require є об'єктом і
bindToControllerє істинним, то необхідні контролери прив'язані до контролера за допомогою ключів властивості require. Якщо ім'я необхідного контролера збігається з місцевим іменем (ключем), ім'я можна опустити. Наприклад,{parentDir: '^parentDir'}еквівалентно{parentDir: '^'}.
Зробив свою скрипкову роботу "Що б я віддав перевагу"! З якоїсь причини ви могли бачити рядок "$ scope.ngForm" у console.log, але його реєстрація безпосередньо не спрацювала, що призвело до невизначеності. Однак ви можете отримати його, якщо передасте атрибути функції контролера.
app.directive('myForm', function() {
return {
restrict: 'A',
controller: ['$scope','$element','$attrs', function($scope,$element,$attrs) {
this.getForm = function() {
return $scope[$attrs['ngForm']];
}
}]
}
});