Я видел много примеров людей, использующих комбинацию HTML и директив для создания формы AngularJS (как здесь) , но я пытаюсь создать автономный виджет, который имеет весь HTML для формы в поле templateURL директивы. , поэтому я могу просто вставить эту однострочную директиву в любой другой HTML-файл и получить форму. Какие-либо предложения?
Вот plnkr с примерами директив, которые в качестве примера приводят форму и кнопку обновления / обратного вызова.
Я определяю свою директиву так: Я использовал шаблон, когда форма простая:
angular.module('components', [])
.directive('myForm', function() {
return {
restrict: 'E',
template: `<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
<input type="submit" ng-click="update(user)" value="Save" />
</form>`,
link: function(scope, element, attr) {
scope.update = function(user) {
console.log('update ' + JSON.stringify(user));
}
}
}
});
Итак, директива приносит форму, и я определил функцию «update», которую я вызываю на кнопке отправки. Функция отображает сообщение в консоли ... например:
update {"name":"john doe","email":"[email protected]"}
В остальном в приложении ничего нет:
angular.module('HelloApp', ['components'])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.name = 'This is the controller';
}]);
А HTML выглядит так:
<body>
<div ng-controller="MyCtrl">
<my-form></my-form>
</div>
</body>
Если вы хотите использовать вместо этого templateUrl, у меня есть другая директива, определенная следующим образом:
.directive('myFormExternal', function() {
return {
restrict: 'E',
templateUrl: 'myFormExternal.html',
link: function(scope, element, attr) {
scope.updateExternal = function(user) {
console.log('External Form: ' + JSON.stringify(user));
}
}
}
});
И форма html:
<form novalidate class="simple-form">
Firstname: <input type="text" ng-model="external.firstname" /><br />
Lastname: <input type="text" ng-model="external.lastname" /><br />
<input type="submit" ng-click="updateExternal(external)" value="Save" />
</form>
Надеюсь это поможет. Дайте нам знать.
Эта статья взята из Интернета, укажите источник при перепечатке.
Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.
я говорю два предложения