首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >您可以在创建时将参数传递给AngularJS控制器吗?

您可以在创建时将参数传递给AngularJS控制器吗?
EN

Stack Overflow用户
提问于 2013-01-25 22:21:29
回答 10查看 344.1K关注 0票数 282

我有一个控制器负责与应用程序接口通信,以更新用户的属性,姓名,电子邮件等。每个用户都有一个'id',这是从服务器时传递的个人资料页面被查看。

我希望将这个值传递给AngularJS控制器,这样它就可以知道当前用户的API入口点是什么。我尝试过在ng-controller中传递这个值。例如:

function UserCtrl(id, $scope, $filter) {

$scope.connection = $resource('api.com/user/' + id)

在HTML中

<body ng-controller="UserCtrl({% id %})">

其中{% id %}打印从服务器发送的id。但是我得到了错误。

在创建时将值传递给控制器的正确方法是什么?

EN

回答 10

Stack Overflow用户

发布于 2014-03-15 21:46:53

这也是可行的。

Javascript:

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

app.controller('MainCtrl', function($scope, name, id) {
    $scope.id = id;
    $scope.name = name;
    // and more init
});

Html:

<!DOCTYPE html>
<html ng-app="angularApp">
  <head lang="en">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
    <script src="app.js"></script>
    <script>
       app.value("name", "James").value("id", "007");
    </script>
  </head>
  <body ng-controller="MainCtrl">
    <h1>I am  {{name}} {{id}}</h1>
  </body>
</html>
票数 39
EN

Stack Overflow用户

发布于 2014-02-13 18:23:50

就像@akonsu和Nigel Findlater建议的那样,你可以用$routeParams.id读取url为index.html#/user/:id的url,并在控制器中使用它。

您的应用程序:

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

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/:type/:id', {templateUrl: 'myView.html', controller: 'myCtrl'});
}]);

资源服务

app.factory('MyElements', ['$resource', function($resource) {
     return $resource('url/to/json/:type/:id', { type:'@type', id:'@id' });
}]);

控制器

app.controller('MyCtrl', ['$scope', '$routeParams', 'MyElements', function($scope, $routeParams, MyElements) {
    MyElements.get({'type': $routeParams.type, "id": $routeParams.id }, function(elm) {
        $scope.elm = elm;
    })
}]);

然后,可以根据id在视图中访问elm

票数 15
EN

Stack Overflow用户

发布于 2014-11-26 17:47:55

看起来对你来说最好的解决方案实际上是一个指令。这允许您仍然拥有您的控制器,但为它定义自定义属性。

如果您需要访问包装作用域中的变量,请使用以下代码:

angular.module('myModule').directive('user', function ($filter) {
  return {
    link: function (scope, element, attrs) {
      $scope.connection = $resource('api.com/user/' + attrs.userId);
    }
  };
});

<user user-id="{% id %}"></user>

如果您不需要访问包装作用域中的变量,请使用此方法:

angular.module('myModule').directive('user', function ($filter) {
  return {
    scope: {
      userId: '@'
    },
    link: function (scope, element, attrs) {
      $scope.connection = $resource('api.com/user/' + scope.userId);
    }
  };
});

<user user-id="{% id %}"></user>
票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14523679

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档