在发送请求之前将视图中的值绑定到模型

时间:2014-01-17 12:35:12

标签: javascript json angularjs

我正在使用带有laravel的anuglar。

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

加载视图后,我希望angular将userid绑定到变量,然后使用它来完成对路径someotherresource / userid的http get请求。

当我硬编码路由到角度控制器时,它工作正常,但当我尝试输入变量时,我得到一个未定义的错误,我认为是因为角度试图在页面完全加载之前触发请求并且值为被绑定到模型

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 %%。

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

2 个答案:

答案 0 :(得分:2)

您需要声明$scope.userid变量。我还建议不要为控制器使用常规函数声明,Angular为您提供模块,以便在全局范围内不存在这些函数:

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

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

  $scope.userid = 'Todd Motto';

});

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

答案 1 :(得分:1)

仅在隐藏时添加ng-model不会设置模型值。即使将来它也不会被设定。更好的方法是使用像ng-init之类的东西来设置初始变量并监视其变化

看我的小提琴http://jsfiddle.net/cmyworld/WjJPT/

如果你可以在html上定义关于控制器div的ng-init,你甚至不需要做手表。