I have created a simple angularjs directive to input city and zip codes. It works fine except that if I used it twice within the same controller the values in the input field are duplicated! I believe it's a scope problem but I don't know how to solve it?
FDVilleModule = angular.module('FDVille', []).
directive('fdVille', () ->
return {
restrict: 'E'
require: 'ngModel'
template: """
<div class=\"row-fluid\">
<div class=\"span4\">
<input
ng-model=\"cp\"
ng-change=\"edit()\"
maxlength=\"5\"
type=\"text\"
class=\"input-block-level\"
placeholder=\"Code Postal\" />
</div>
<div class=\"span8\">
<select ng-model=\"selected_ville\"
ng-options=\"v.id as v.nom for v in villes\"
class=\"input-block-level\">
</select>
</div>
</div>"""
link: (scope, elem, attr, ctrl) ->
scope.$watch('selected_ville', (value)->
ctrl.$setViewValue(value))
controller: ($scope) ->
download_villes = (cp) -> $.getJSON('/ws/villes/cp', {cp:cp}, set_data)
download_villesid = (id) -> $.getJSON('/ws/villes/id', {id:id}, set_init_data)
set_data = (results) ->
$scope.villes = results
$scope.selected_ville = results[0].id if results.length
$scope.$apply()
saved_cp = ""
$scope.edit = () ->
if isNaN($scope.cp)
$scope.cp = saved_cp
else
saved_cp = $scope.cp
if saved_cp.length == 5
download_villes(saved_cp)
else
$scope.selected_ville = null
$scope.villes = []
}
)
Actually I found the answer in the docs:
scope - If set to:
true - then a new scope will be created for this directive. If multiple directives on the same element request a new scope, only one new scope is created. The new scope rule does not apply for the root of the template since the root of the template always gets a new scope.
In some other instance, you could try
replace: true
Note: you need to have one root element.
Here's the link to the documentation for us readers who didn't know: