Angularjs ui-select (select2) not working with 'Controller as' syntax not getting selected ite

Question

I'm trying to get a select HTML control working with AngularJS ui-select which is located here on GitHub. For some reason, I am able to get the item selected when using $scope syntax, but not when I use the Controller As syntax. The plunker I am trying to get working with Controller as syntax is located here. I'm not sure what I am missing especially since the $scope syntax works perfectly.

I'm not getting any errors to report. Here is a snippet from what is in plunker.

Controller

var app = angular.module('demo', ['ngSanitize', 'ui.select']);

app.controller("MainCtrl", MainCtrl);

function MainCtrl()
{
  var controller = this;

  controller.person = {};
  controller.people = [
    { name: 'Adam',      email: 'adam@email.com',      age: 10 },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }
  ];

}

index.html

<body ng-controller="MainCtrl as vm">
    <h3>Select2 theme</h3>
    <p>Selected: {{vm.person.selected}}</p>
    <ui-select ng-model="person.selected.name" theme="select2" ng-disabled="disabled" style="min-width: 300px;">
    <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="person in vm.people | propsFilter: {name: $select.search, age: $select.search}">
        <div ng-bind-html="person.name | highlight: $select.search"></div>
        <small>
            email: {{person.email}}
            age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
        </small>
    </ui-select-choices>
</ui-select>

score 2 · Accepted Answer · answered Feb 09 '16 at 03:03

2

After fixing all of your scripts to work with https rather than http (requirement for plunker) and changing ng-model="person.selected.name" to ng-model="vm.person.selected.name", the ControllerAs version works perfectly with no further adjustments.

https://plnkr.co/edit/2VtUefWPKdBVaqY1gU66?p=preview

answered Feb 09 '16 at 03:03

Claies

22,124
4
53
77

Interesting Claies. I knoew about plunkers requirements, but i must have completely forgotten to add the vm back in. Thank you for updating it. – gcoleman0828 Feb 09 '16 at 13:30
Long time no see... @Claies – amanuel2 Mar 27 '16 at 02:05

score 0 · Answer 2 · answered Feb 08 '16 at 06:09

0

The name used as an alias for controller in the HTML should be the same name of the varibale referred in Javascript file too. Plus, you are missing the scope in method MainCtrl(). So here, in your case the variable in JS should be vm. You can refer an example in jsfiddle.

Please find the updated code below.

Javascript

function MainCtrl($scope) {
    var vm = this;

    vm.person = {};
    vm.people = [
      { name: 'Adam', email: 'adam@email.com', age: 10 },
      { name: 'Amalie', email: 'amalie@email.com', age: 12 },
      { name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
      { name: 'Samantha', email: 'samantha@email.com', age: 31 },
      { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
      { name: 'Natasha', email: 'natasha@email.com', age: 54 },
      { name: 'Nicole', email: 'nicole@email.com', age: 43 },
      { name: 'Adrian', email: 'adrian@email.com', age: 21 }
    ];
    $scope = vm;
}

answered Feb 08 '16 at 06:09

Shashank

2,010
2
18
38

Thank you for the response @Shashank I thought using the controller as syntax with an alternative to using $scope? I'm guessing that is incorrect? Also, I have read a few times now that $scope was going away in a new version of Angular? Is that false? – gcoleman0828 Feb 08 '16 at 13:59
There is no problem in using `controller as` syntax. But there should be a way for `$scope` to inject so as to exploit `dependency-injection`, otherwise how would the controller know the `scope` and how the models would bind between `controllers` and `model`. I don't know whether `scopes` are going away or not. Need to research it out. – Shashank Feb 08 '16 at 17:11
-I see what you are saying about 'how does it know', but since I'm new to angular, I guess based on everything I have been reading, the 'controller as' syntax is just that, syntactical sugar. usually, in my experience, syntactical sugar just means shorter or easier to read code "without" loss of functionality. Here are some examples of what I have been reading: https://toddmotto.com/digging-into-angulars-controller-as-syntax http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/07/02/exploring-angular-s-controller-as-syntax-and-the-vm-variable.aspx Thoughts?? – gcoleman0828 Feb 08 '16 at 17:24
any thoughts on those links @Shashank ? I don't see any of them reference $scope? – gcoleman0828 Feb 09 '16 at 01:26
1

setting `$scope = vm` isn't something that makes sense with the newer releases of angular 1.3+. In fact, using `$scope = vm` can cause unexpected complications with the automatic scope inheritance in angular. It was a workaround before `ControllerAs` was added, and shouldn't be used. – Claies Feb 09 '16 at 02:56
gcoleman0828 yeah I have gone through those links and it is helpful as I was not aware of it. @Claies thankx for the knowledge info. – Shashank Feb 09 '16 at 04:48
@gcoleman0828, as far as `$scope` is concerned it's OK, but what about other dependency injections such as `$location, $rootScope, $window, etc`, how can one replace those in the new AngularJS versions? – Shashank Feb 09 '16 at 04:52
@Shashank as far as I understand angulars (which I'l admit is still very new to me), $window, $location etc are seperate services and will still need to be injected the same as previous AngularJS versions. It is just $scope that is going away completely. That 'service' is being depreicated. Is that accurate @Claies? – gcoleman0828 Feb 09 '16 at 13:29
1

the `$scope` service isn't deprecated in angular 1.x, it merely has been given an alternative format to provide for easier transition to angular 2. Angular 2 is a complete rewrite from the ground up, and none of the existing features operate in the same manner. You *can* still inject `$scope` when necessary (broadcasts, for example), but using ControllerAs gives you the option not to use it for **every** situation. – Claies Feb 09 '16 at 15:49
it is interesting, however, that the comments around an answer have evolved into another question.... – Claies Feb 09 '16 at 15:50

Angularjs ui-select (select2) not working with 'Controller as' syntax not getting selected ite

2 Answers2

Linked