All geek questions in one place

How to create $ scope functions that never read $ scope?

I want to create a $ scope function that will only process the variables that it receives.

I did a working Plunker to check the situation.

I have ng-repeat, which simply lists the names and identifiers of kittens. I also have an input form to get the name of the new kitten. Then I have 3 buttons, each of which refers to a different $ scope function, which will manipulate $ scope in different ways.

The purpose of each function is to read the kitten name from the input form, read the last used identifier in the kittens array, assign id + 1 to the new kitten, click the new kitten in the kittens array and delete the form data .

  • The first function , $scope.addFullScope()do not get anything as an argument and will read and manipulate everything from $scope.

  • The second function , $scope.addJustDelete(kitty, kitties)as an argument to get a new array kittyand kitties. But in the end, to clear the form, she will do$scope.kitty = undefined

  • The third function , $scope.addNoScope(kitty, kitties)in will get a new array as an argument kittyand kitties. But in the end, to clear the form, she will do kitty = undefined. But the form will not be cleaned! and everything will look like a mistake.

How can I make this third function or something like that, so that I have a completely independent function to work with?

Application:

Html:

  <body ng-app='app' ng-controller="ctrl">

    <h3 ng-repeat="kitty in kitties">
      {{kitty.name}}: {{kitty.id}} //Kitties list
    </h3>

    <input placeholder='Kitty name to add' class='form form-control' 
           type="text" ng-model="kitty.name" />

    <h3> $scope use on adding kitty:</h3>
    <button ng-click="addFullScope()">Full Scope.</button>
    <button ng-click="addJustDelete(kitty, kitties)">Just delete.</button>
    <button ng-click="addNoScope(kitty, kitties)">None. Buggy</button>
  </body>

Controller:

.controller('ctrl', function($scope) {
  $scope.kitties = [
    //Let imagine kitties in here.
    {name: 'Purple kitty', id:35},
    //Kittie 36 died in a car accident. :(
    {name: 'Rodmentou cat', id: 37},
    {name: 'Fatty kitty', id: 38}

    ];

  $scope.addFullScope = function () {
    var size = $scope.kitties.length;
    var id = $scope.kitties[size-1].id + 1;

    $scope.kitty.id = id;
    $scope.kitties.push($scope.kitty);
    $scope.kitty = undefined;
  };

  $scope.addJustDelete = function (kitty, kitties) {
    var size = kitties.length;
    var id = kitties[size-1].id + 1;

    kitty.id = id;
    kitties.push(kitty);
    $scope.kitty= undefined;

  };

  $scope.addNoScope = function (kitty, kitties) {
    var size = kitties.length;
    var id = kitties[size-1].id + 1;

    kitty.id = id;
    kitties.push(kitty);
    kitty = undefined; //Don't work
  };



});
+4
source share
5 answers

Angular , ngModel, $scope. $watch . $watch , , - , , , , .

Tero Parviainen

enter image description here

, , kitty = undefined, ngModel $scope. $watch kitty.name. , kitty.name, kitty = undefined, . kitty undefined , ( )! plunker .

HTML

, kitten, kitties, .

<h3 ng-repeat="kitty in kitties">
  {{kitty.name}}: {{kitty.id}}
</h3>
<input placeholder='Kitty name to add' class='form form-control' type="text" ng-model="kitten.name" />
<h3> $scope use on adding kitty:</h3>
<button class='btn btn-success' ng-click="addNoScope(kitten, kitties)">None. Buggy</button>
<button class='btn btn-danger' ng-click="noWatch(kitten)">Full Scope.</button>

Javascript

- , . , reset , kitten.name kitten.id.

angular.module('app', [])
.controller('ctrl', function($scope) {

  $scope.kitten = {
    name: undefined, id: undefined
  };

  $scope.$watch('kitten.name', function() { console.log("changed"); }, true);

  $scope.kitties = [
    //Let imagine kitties in here.
    {name: 'Purple kitty', id:35},
    //Kittie 36 died in a car accident. :(
    {name: 'Rodmentou cat', id: 37},
    {name: 'Fatty kitty', id: 38}

  ];

  $scope.addNoScope = function (kitten, kitties) {
    if (!$scope.kitten || !$scope.kitten.name) return;
    var size = kitties.length;
    var id = kitties[size-1].id + 1;
    var newKitten = {
      name: kitten.name, id: id
    }
    kitties.push(newKitten);
    kitten.name = undefined;
    kitten.id = undefined;
    // kitten = undefined;
  };

  $scope.noWatch = function (kitten) {
    kitten = undefined;
    console.log('not watching');
  };

});
+9

, $scope.addNoScope(kitty, kitties) " " kitty, , . .

, $scope.kitty id. addNoScope , angular , angular ng-repeat, track by.

, , , kitty , , , ,

var obj = {id:1};

function changeReference (obj){ 
    //changing the reference to an entirely new object
    obj = {id:2}
}

function changeProperty (obj){ 
    //changing a property of the current object
    obj.id = 2
}

changeReference(obj);
console.log(obj.id);
//1 as original obj is not affected

changeProperty(obj);
console.log(obj.id);
//2

,

$scope.addNoScope = function (fields, kitties) {
    var size = kitties.length;
    var id = kitties[size-1].id + 1;

    fields.kitty.id = id;
    kitties.push(fields.kitty);
    fields.kitty = undefined; //Don't work
  };

html

<input placeholder='Kitty name to add' class='form form-control' type="text" ng-model="fields.kitty.name" />
<h3> $scope use on adding kitty:</h3>
<button class='btn btn-danger' ng-click="addFullScope()">Full Scope.</button>
<button class='btn btn-warning' ng-click="addJustDelete(fields.kitty, kitties)">Just delete.</button>
<button class='btn btn-success' ng-click="addNoScope(fields, kitties)">None. Buggy</button>

$scope.kitty $scope.fields.kitty .

+3

, :

  $scope.addNoScope = function (kitty, kitties) {
    manipulateKitties(kitty, kitties);
    resetForm();
  };

  function manipulateKitties(kitty, kitties) {
    var size = kitties.length;
    var id = kitties[size-1].id + 1;

    kitty.id = id;
    kitties.push(kitty);
  }

  function resetForm() {
    $scope.kitty= undefined;
  }
+2

, JS pass-by-ref-ish. ,

()

    function double(x) {
      x.val = 2 * x.val;
    }

    function doubleToo(x) {
      x = 2 * x;
    }

    var data = {
      val: 2
    };

    document.write("Initial: " + data.val + "<br />");

    double(data); //data.val now = 4

    document.write("Double: " + data.val + "<br />");

    doubleToo(data.val); //data.val is still 4

    document.write("DoubleToo:" + data.val);
Hide result

. , , , ( ) .

, , $scope, $scope ( , $scope). , data data.val .

+1

:

  $scope.addNoScope = function (kitty, kitties) {
    var size = kitties.length;

    kitties.push({ //you need to create a new object
      id : kitties[size-1].id + 1,
      name : kitty.name
    });
    kitty.name = undefined;   
};

, JavaScript , , kitty $scope.kitty. , , undefined, .

0

Source: https://habr.com/ru/post/1618455/

More articles:


All Articles