Angularjs:修改js中的作用域，稍后在页面中使用

Angularjs: modify scope in js and use later in page

本文关键字：修改 js 作用域 Angularjs      更新时间：2023-09-26

如果有什么东西，我很想看看关于这样的文档。

我正试图将查询字符串中的一个值添加到控制器的作用域中，并在页面下方的另一个函数中使用该值。

这就是我尝试过的：

var id = Number(getQueryStringValue("id"));
if (!!id) {
    $('[ng-controller="appControl"]').scope().id = id;
}

设置范围内的值和：

<p>
    id: {{id}}
</p>

向下翻页打印id。如果我这样做：

var x = $('[ng-controller="appControl"]').scope();

我可以看到id确实已经添加到了作用域中，但我得到的唯一输出是id:。我还可以看到，id实际上是一个数字，而不是字符串或其他无法打印的值。

--编辑--

由于这似乎不是最好的方法，我查看了工厂，以下是我的代码（由于某种原因仍然不起作用），包含在一个单独的文件中：

var app = angular.module('app', []);
app.controller('appctrl', function ($scope) {
  $scope.dataArr= [
    {'name': 'Yo'},
    {'name': 'Dawg'}
  ];
});
app.factory('Data', function () {
    var idValue = 0;
    return {
        setId: function (id) {
            idValue = id;
        },
        getId: function () {
            return idValue;
        }
    }
});

这是有问题的页面上的脚本：

<script type="text/javascript">
$(function () {
    var id = Number(getQueryStringValue("id"));
    if (!!id) {
        app.controller('appctrl', function($scope, Data) {
            $scope.id = Data.setId(id);
                });
    }
});
</script>
<div ng-app="app">
    <div ng-controller="appctrl">
        {{id}}
    </div>
</div>

@artyom已经给了您一个提示。您需要在代码后面设置id后调用$apply()函数，如下所示：

var id = Number(getQueryStringValue("id"));
if (!!id) {
    $('[ng-controller="appControl"]').scope().id = id;
    $('[ng-controller="appControl"]').scope().$apply();
}

那么您正在使用jQuery来修改您的作用域？

这听起来是个非常非常糟糕的主意。

试着在你的主要框架内解决所有问题，只有在问题真的无法解决的情况下才采用其他方法。

你没有提到你想解决什么问题，但现在，我没有理由认为AngularJS无法解决这个问题。

如果您希望能够在控制器内设置作用域变量，并能够在控制器外访问它们，请查看$rootscope。

在分配新的id值后，尝试调用appControl控制器中的$scope.$apply()。

请参阅并调查这篇文章。

但是，在AngularJS中在控制器之间共享数据是一种非常糟糕的方法。这里和这里描述了更好的方式。

在不相关的作用域之间共享数据的正确方式是通过服务或工厂：

app.factory('Data', function() {
    var idValue = 0;
    return  {
        setId: function(id) {
            idValue = id;
        },
        getId: function() {
            return idValue;
        }
    }
});

然后，在任何控制器中，您都可以注入数据服务：

app.controller('ctrl1', function($scope, Data) {
     Data.setId(10); 
     $scope.id = Data.getId();
});
app.controller('ctrl2', function($scope, Data) {
     $scope.id = Data.getId(); 
});


var app = angular.module('app', []);
app.factory('Data', function() {
  var idValue = 0; 
  return  {
    setId: function(id) {
      idValue = id;
    },
    getId: function() {
      return idValue;
    }
  }
 });
app.controller('ctrl1', function($scope, Data) {
  Data.setId(10);
  $scope.id = Data.getId();
});
app.controller('ctrl2', function($scope, Data) {
   $scope.id = Data.getId(); 
});
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <div ng-app="app">
      
      <div ng-controller="ctrl1">
        ctrl1: {{ id }}
      </div>
      
      <div ng-controller="ctrl2">
        ctrl2: {{id}}
      </div>
      
    </div>

相关文章：