Question

如果有什么东西我会喜欢看到类似这样的文档。

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

这是我尝试过的：

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>

Answer 1

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

请查看并调查this文章。

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

Answer 2

所以你使用jQuery来修改你的范围？

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

尝试解决主框架中的所有问题，并且只有在问题无法解决的情况下才能使用其他方法。

你没有提到你想要解决的问题，但是现在，我没有理由认为它不能在AngularJS中解决。

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

Answer 3

在不相关的范围之间共享数据的正确方法是通过服务或工厂：

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>

Answer 4

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

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

Angularjs：修改js中的范围，然后在页面中使用

4 个答案: