javascript - 在发送请求之前将 View 中的值绑定(bind)到模型

Question

我正在使用 anuglar 和 laravel。

laravel 返回一个 View ，其中包含用户 ID 作为隐藏输入字段。

加载 View 后，我希望 Angular 将 userid 绑定(bind)到变量，然后使用它来完成对路由 someotherresource/userid 的 http get 请求。

当我硬编码到 Angular Controller 的路由时，它工作正常，但是当我尝试输入变量时，我收到一个未定义的错误，我认为这是因为 Angular 试图在页面完全加载之前触发请求并且该值已已绑定(bind)到模型

app.js

function resourceController($scope, $http) {
     /*$http.get('/resource' + $scope.userid).success(function(resource) {
        $scope.resource = resource;
     });*/
     console.log($scope.userid);
}

html

<div ng-controller="resourceController">
<form>
<input type="hidden" value="1" ng-model='userid'>
</form>
%% userid %%
</div>

编辑:将 console.log 添加到 js 并将 %% userid %% 添加到 html。这让我在控制台中未定义，并且 %% userid %% 没有显示任何内容。

注意:我已将常规 {{ }} 语法更改为 %% %% 以避免与后端模板语言发生冲突。

Answer 1

您需要声明您的 $scope.userid 变量。我还建议不要为 Controller 使用常规函数声明，Angular 为您提供了执行此操作的模块，以便这些函数不存在于全局范围内:

var myApp = angular.module('myApp', []);

myApp.controller('getRatingsController', function ($scope, $http) {

  $scope.userid = 'Todd Motto';

});

http://codepen.io/anon/pen/mJfwd