Как использовать настраиваемую директиву для полей ввода в Angular 1.x?

Я пытаюсь изменить элемент input с помощью пользовательской директивы AngularJS. В основном я хочу заменить любые поля <input type="country"> выпадающим списком страны.Как использовать настраиваемую директиву для полей ввода в Angular 1.x?

Но директива, похоже, не работает с полями input. Если я изменю его на любой другой тег, он работает?

Вот код:

angular.module('plunker', []) 
 
.controller('MainCtrl', function ($scope) { 
 
    $scope.name = 'World'; 
 
}); 
 

 

 
angular.module('plunker') 
 
.directive('input', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: {ngModel: '=?'}, 
 
    link: function(scope, elem, attr) { 
 
     if(attr.type === 'country') { 
 
     elem.html('html code for select'); 
 
     alert(elem); 
 
     } 
 
    } 
 
    }; 
 
});

<!doctype html> 
 
<html ng-app="plunker" > 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>AngularJS Plunker</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script>document.write("<base href=\"" + document.location + "\" />");</script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 
<body ng-controller="MainCtrl"> 
 
    Name: <input type="country" ng-model="name"/> <br/> 
 
</body> 
 
</html>

Может кто-то пожалуйста, объясните и предложить обходной путь?

P.S. Я также попытался сделать это в директиве, но это тоже не сработает!

replace: true, 
template:'<div>hello</div>'

P.S. Я знаю, что могу использовать ng-country или какой-либо другой пользовательский тег, но я хочу изменить тег input только потому, что хочу узнать, почему это происходит, или, возможно, узнать, что я делаю неправильно?

источник

2016-08-14 supersan

Вместо того, чтобы объявить вашу директиву в качестве элемента, то почему бы не объявить его как атрибут? – stevenelberger

Вы должны дать ограничение на уровень класса/атрибута и настраиваемое имя директивы как любой myInput и т. Д., –

Последнее обновление:

Ваш код просто установив HTML на элемент, вместо того, чтобы заменить его. Вы хотели бы использовать ReplaceWith вместо так:

var app = angular.module("TestApp",[]); 

app.controller("TestController", function($scope){ 
    $scope.message = "Input Directive Test" 
}); 

app.directive("input", function() { 
    return { 
    restrict: "E", 
    link: function(scope, elem, attr) { 
     if(attr.type === "country") { 
     var select = angular.element("<select><option>USA</option></select>"); 
     elem.replaceWith(select);   
     } 
    } 
    } 
});

И вот JSBin: https://jsbin.com/juxici/4/edit?html,js,output

Первоначальная версия моего ответа:

Вот пример, который работает без каких-либо проблем, когда «заменить 'и' template '. Я не проверяю тип и т. Д., Но вы можете сделать это в коде компоновщика.

JSBin: https://jsbin.com/juxici/2/edit?html,js,output

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 

</head> 
<body ng-app="TestApp"> 
    <div ng-controller="TestController"> 
    <h2>{{message}}</h2> 
    <input type="country" ng-model="name"/> 
    </div> 
</body> 
</html>

Javascript:

var app = angular.module("TestApp",[]); 

app.controller("TestController", function($scope){ 
    $scope.message = "Input Directive Test" 
}); 

app.directive("input", function() { 
    return { 
    restrict: "E", 
    replace: true, 
    template:"<select><option>USA</option></select>" 
    } 
});

источник

2016-08-14 03:50:43 KumarM

спасибо! он работает, но есть еще одна проблема. Когда я запускаю элемент '$ compile', он, похоже, не работает? Есть идеи? – supersan

@supersan Почему вы используете компиляцию $? показать код. Помог ли этот ответ вам с вашим первоначальным вопросом, и вы расширяете вопрос? Просто пытаюсь понять. – KumarM

привет, посмотрите этот код: https://jsbin.com/yiyideyomu/edit?html,js,output (мне нужно скомпилировать его, потому что я хочу использовать 'ng-options' в select) – supersan

Как использовать настраиваемую директиву для полей ввода в Angular 1.x?

ответ

Смежные вопросы