Question

我试着寻找类似于我的类似问题，但无法得到任何问题。请原谅，如果这个问题是重复的并且已经得到解答。

我的HTML有两个输入字段用于名字和姓氏，还有一个按钮：

<body ng-app="myApp" >
  <div ng-controller="myCtrl">
     <input type="text" ng-model="fname"/>
     <input type="text" ng-model="lname"/>
     <input type="button" ng-click="createObj();" value="Clear Scope"/>
     <p>Fname = {{fname}}</p>
     <p>Lname = {{lname}}</p>
 </div>

这是我的JS文件，它具有控制器功能：

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){

   $scope.fname = "sandeep";
   $scope.lname = "nayak";

   $scope.createObj= function(){

     var obj = {fn:$scope.fname, ln: $scope.lname};
     console.log(obj);

     $scope.fname = "";
     $scope.lname = "";

     console.log(obj);

   };


});

在createObj方法中，我创建了一个包含名字和姓氏的对象，然后我清除了$ scope。

在清除$ scope之前和之后，我将对象记录两次。但我没有看到任何区别。

为什么对象仍然相同，即使在我清除$ scope之后，因为我在我的对象中引用$ scope？

http://jsfiddle.net/7eo4zcvq/

Answer 1

这与Angular无关，只与Javascript本身有关。

写作时

var obj = {fn:$scope.fname, ln: $scope.lname};

$ scope.fname / lname被解析为它们的值，这是字符串，所以这个对象恰好被初始化为

var obj = {fn:"sandeep", ln:"nayak"};

因此清除范围不会对它产生任何影响：这是因为字符串不像常规对象那样处理，而是像本机类型一样（与数字和布尔值相同）。

这种行为的一个更简单的例子是：

var a = "hello";
var b = a;
a = "world";
console.log(a);       // outputs "world"
console.log(b);       // outputs "hello"
console.log(a === b); // outputs false

Answer 2

您需要使用fname和lname的新值再次更新变量obj。清除fname和lname的值不会对obj产生任何影响。请参阅下面的更新代码。

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){
    $scope.fname = "sandeep";
    $scope.lname = "nayak";

    $scope.createObj = function(){
        var obj = {fn:$scope.fname, ln: $scope.lname};
        console.log(obj);

        $scope.fname = "";
        $scope.lname = "";
        var obj = {fn:$scope.fname, ln: $scope.lname};

        console.log(obj);
    }



});

Answer 3

清除范围后更新obj的值;您必须按照@Joshua Arvin Lat的建议手动更新obj，或者您可以将fn和ln转换为函数：

var myApp = angular.module("myApp", []);
myApp.controller("myCtrl",function($scope){
$scope.fname = "sandeep";
$scope.lname = "nayak";

$scope.createObj = function(){
    var obj = {fn:function() {return $scope.fname;} , ln: function() {return $scope.lname;} };
    console.log(obj.fn());
    console.log(obj.ln());    

    $scope.fname = "";
    $scope.lname = "";

    console.log(obj.fn());
    console.log(obj.ln());    

}

}）;

工作示例：http://jsfiddle.net/7eo4zcvq/2/

Answer 4

有一种更简单的方法来存储参考。在$scope中定义一个对象，而不是基本类型的变量。

$scope.person = {
    fname: "sandeep",
    lname: "nayak"
}

$scope.createObj = function(){
    var obj = {
        person: $scope.person,
        toString: function(){
            return this.person.fname + ' ' + this.person.lname;
        }};
    console.log(obj.toString());

    $scope.person.fname = "a";
    $scope.person.lname = "a";

    console.log(obj.toString());
}

更新了jsfiddle

在对象中使用Angular $ scope变量

4 个答案: