0

I am using ui-select inside a controller, I need to listen for changes for the ng-model from the controller, here is my HTML:

<div id="countryCtrl" country-selection class="form-inline">
    <ui-select  ng-model="selectedCountry" theme="selectize" style="{{$cat_style}}">

        <ui-select-match placeholder="Select or search ...">
    @{{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices repeat="country in countries | filter: $select.search">
        <span ng-bind-html="country.title | highlight: $select.search"></span>
    </ui-select-choices>

    </ui-select>

</div>

In the countrySelection controller:

angular.module('mainCtrl').directive('countrySelection', ['Country','state', function(Country, state) {


var linkF = function (scope, element, attrs, widgetPath) {

        scope.$watch("selectedCountry", function (neww, old) {

            console.log(scope.selectedCountry);
            widgetPath.selectedCountry= widgetPath.model.selectedCountry;
            scope.update("state.country.changed",scope.selectedCountry);//widgetPath.model.selectedCountry);

        }, true);



    };


    return {

        require: "^widgetPath",
        restrict: 'A',
        link: linkF,
        scope: {}
    }

}]);

watch would work if I set the country-selection at the ui-select directive as an attribute like this:

<ui-select  ng-model="selectedCountry" country-selection theme="selectize" style="{{$cat_style}}">

but, then, I won't be able to isolate the scope for country-selection and I will get error

Multiple directives [countrySelection, uiSelect] asking for new/isolated scope on:

So, how would I watch ng-Model attribute at ui-select directive from the parent directive country-selection ?

Samir Sabri
  • 937
  • 3
  • 11
  • 26

1 Answers1

0

There is an on-select attribute, from there you can call a function on your scope.

<ui-select ng-model="person.selected" theme="select2" on-select="someFunction($item, $model)" ...
Raulucco
  • 3,406
  • 1
  • 21
  • 27
  • thanks, then in this way, I don't have to watch ng-model changes? – Samir Sabri Apr 13 '15 at 16:19
  • I've noticed that the example you've mentioned uses the controller as app.controller('DemoCtrl', .. I need to have isolated scope, is this possible without using link? – Samir Sabri Apr 13 '15 at 16:37
  • Yes, i think you can prescind of the watch and it is possible to have an isolated scope. if the method come from the controller you can pass it to the directive with scope: { methodName: '&'} and use it on the directive. – Raulucco Apr 14 '15 at 07:56