What is the difference between $scope and this?

N

Nikolay2016-09-14 13:17:03

JavaScript

Nikolay, 2016-09-14 13:17:03

I'm trying to figure out with ui-sortable .
A not very clear situation arose: I study Angular at codeschool, where this is used everywhere, and in Google I always come across $scope.
Why with this code:
html:

<body ng-controller="TestSortableController as SortCtrl">

<ul id="list_1" class="list_1"  ui-sortable="list1Options" ng-model="SortCtrl.list1">
    <li class="app" ng-repeat="app in SortCtrl.list1">  {{ app.name }}  </li>
</ul>

<ul id="list_2" class="list_2"  ui-sortable="list2Options" ng-model="SortCtrl.list2">
    <li class="app"  ng-repeat="app in SortCtrl.list2">  {{ app.name }} </li>
</ul>

</body>

js:

(function () {
    var app = angular.module('testSortable', ['ui.sortable']);

    app.controller('TestSortableController', function () {

        this.list1 = [
            {
                name: "first name",
                type: "second type"
            }, {
                name: "second name",
                type: "third type"
            }
        ];

        this.list2 = [
            {
                name: "another name",
                type: "another type"
            },{
                name: "another second name",
                type: "another second type"
            },
        ];

        this.list1Options = {
            placeholder: 'app',
            connectWith: '.list_2'
        };
        this.list2Options = {};
    });

})();

li lists are only draggable in the parent ul, but it's worth replacing this with $scope and removing SortCtrl.%list%:
html:

<body ng-controller="TestSortableController">

<ul id="list_1" class="list_1"  ui-sortable="list1Options" ng-model="list1">
    <li class="app" ng-repeat="app in list1">  {{ app.name }}  </li>
</ul>

<ul id="list_2" class="list_2"  ui-sortable="list2Options" ng-model="list2">
    <li class="app"  ng-repeat="app in list2">  {{ app.name }} </li>
</ul>

</body>

js:

(function () {
    var app = angular.module('testSortable', ['ui.sortable']);

    app.controller('TestSortableController', function ($scope) {

        $scope.list1 = [
            {
                name: "second name",
                type: "third type"
            }, {
                name: "third name",
                type: "fourth type"
            }
        ];

        $scope.list2 = [
            {
                name: "another name",
                type: "another type"
            },{
                name: "another second name",
                type: "another second type"
            },
        ];

        $scope.list1Options = {
            placeholder: 'app',
            connectWith: '.list_2'
        };
        $scope.list2Options = {};
    });
})();

How everything starts working exactly as it should.
Can anyone explain why this happened, and where should I use $scope in the future, and where is this? (Is it necessary?)
I apologize for the long code, I hope you can help ;(

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Manakov, 2016-09-14
@iNickolay

For the first option to work, try

...
<ul id="list_1" class="list_1"  ui-sortable="SortCtrl.list1Options" ng-model="list1">
...
<ul id="list_2" class="list_2"  ui-sortable="SortCtrl.list2Options" ng-model="list2">

In general, read about controllerAs, everything should be written about it there.