AngularJS-点击对象，访问它's ID&以该ID作为参数激发函数

AngularJS - Click on object, access it's ID & fire a function with that ID as parameter

本文关键字：ID 以该 参数 函数 amp 访问 AngularJS- 对象      更新时间：2023-09-26

我正在尝试构建一个网络应用程序，类似于简单iPhone布局的副本，只有主屏幕（显示"已安装"的应用程序）和显示所有可用应用程序的应用程序商店。

当你在应用商店中点击一个应用时，我想访问该应用（div）的ID，并启动一个函数，将ID作为参数发送。函数应该简单地将ID添加到一个数组中，并可能（如果可能）链接到另一个页面。

到目前为止，我的模型中有这个：

var dummyApp = angular.module("dummyApp", [ "ngRoute"]);
.controller('appController', ['$scope', function($scope) {
$scope.homeApps = [
  {id:"1", name:"Dummy", link:"#/"},
  {id:"2", name:"Dummy", link:"#/"}];
$scope.allApps = [
  {id:"1", name:"Dummy", link:"#/"},
  {id:"2", name:"Dummy", link:"#/"},
  {id:"3", name:"Dummy", link:"#/"}];
$scope.addApp = function(id) {
  $scope.homeApps.push({id:id, name:"new app", link:"/#/"});
};
}]);

简而言之，我想点击一个元素（allApps数组的一部分），发送addApp函数并提供ID（如果可能的话，可能取自allApps阵列？），然后将其推送到homeApps（应用程序到主屏幕）

这应该模拟按下一个应用程序，然后当你回到主屏幕时，它会像数组中一样出现在那里。

我的HTML看起来是这样的：

<div ng-click="adApp('3');" class="app" style="background-image:url('icons/{{app.id}}.png');">
</div>

现在我只是发送一个静态的"3"作为ID，但你明白了：）

有任何帮助通知！

您非常接近，只需将ng-click="addApp(app.id)"用于div。

但你遇到的实际问题是，通过对两条路线使用相同的控制器，并且没有在主屏幕上存储应用程序集合的共享位置，你最终会在主屏幕中重复创建同一组原始应用程序。

相反，你需要做的是创建某种Angular服务，它将被正确初始化，然后允许添加应用程序。这将被注入到appController中，这样您每次都可以访问同一个集合，而不是每次运行控制器时都创建一个新的集合。

你可以看到我创建的Plunkr，它展示了一个非常简单的例子。

代码的核心如下：

创建基本服务：

(function (dummyApp) {
  var homeApps = [
    {id:"1", name:"Dummy", link:"#/"},
    // ...
    {id:"10", name:"Dummy", link:"#/"}];
    dummyApp.factory('homeApps', function () {
      return homeApps;
    });
})(dummyApp);

然后在你的控制器中使用它：

dummyApp.controller('appController', ['$scope', 'homeApps', function($scope, homeApps) {
  $scope.homeApps = homeApps;
  $scope.allApps = [
    {id:"1", name:"Dummy", link:"#/"},
    // ...
    {id:"28", name:"Dummy", link:"#/"}];
  $scope.addApp = function(id) {
    homeApps.push({id:id, name:"new app", link:"#/"});
  };
}]);

当然，我可能会创建一些"类"（好吧，相当于JS），以公开一个很好的API来操纵每个应用程序，以及一个允许您从其自身添加和删除应用程序的集合。然后创建一个公开此API的homeScreen服务。但这取决于你。这会让你开始。

相关文章：