Question

我正在使用角度js创建离子应用程序（离子版本v1）。我想从一个html文件中获取clicked元素的数据，并在其他html文件中使用它。

app.js

angular.module('placementApp', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

  // $ionicConfigProvider.views.transition('android'); //none, ios

  $stateProvider

    .state('home', {
      url: '/home',
      templateUrl: 'templates/main.html'
      // controller: 'AppCtrl'
    })

    .state('students', {
      url: '/students',
      templateUrl: 'templates/userList.html'
    })

    .state('companies', {
      url: '/companies',
      templateUrl: 'templates/companyList.html'
    })

    .state('editStudent', {
      url: '/editStudent',
      templateUrl: 'templates/editUser.html'
    });
});

userList.component.js

var app = angular.module('placementApp');

app.controller('userListCtrl', function($scope) {
    $scope.students = [
        {
            name: "Pearl Adam",
            Branch: "CE",
            id: "10562",
            cgpa: "5.9"

        },

        {
            name: "Avrill White",
            Branch: "CSE",
            id: "10821",
            cgpa: "8.3"
        }
    ]


    $scope.getClickedStudent = function(event) {
        $scope.v = event.currentTarget.attributes.data;
        console.log($scope.v);
    }

})

userList.html

<ion-view>
    <ion-header-bar class="bar-stable">
        <h1 class="title">Student List</h1>
    </ion-header-bar>   
    <ion-content class="has-header">
        <div ng-controller='userListCtrl' ng-init='v = "undefined"'>
            <ul class="list" ng-repeat="x in students">
                <li class="item">
                    <a ng-click="getClickedStudent($event)" data='{{x}}' class="item" href='#/editStudent' >
                        <p>Name: {{x.name}}</p>
                        <p>Roll No.: {{x.id}}</p>
                    </a>
                </li>
            </ul>
            {{v.name}}

        </div>
    </ion-content>
</ion-view>

我需要获取clicked元素的数据并在editUser.html中使用它，例如。 {{v.name}}，{{v.cgpa}}。但是v正在获得{}值。

我在以下文件中使用v，而是显示空值{{v}}。 editUser.html

<ion-view>
    <ion-header-bar class="bar-stable">
        <div ng-controller="userListCtrl">
            <h1 class="title">{{v.name}}</h1>
        </div>
    </ion-header-bar> 
    <ion-content class="has-header">
        <div ng-controller='userListCtrl'>
            <div class="list">
                <label class="item item-input">
                    <span class="input-label">Name</span>
                    {{v.name}}
                </label>
                <label class="item item-input">
                    <span class="input-label">Branch</span>
                    {{v.branch}}
                </label>
                <label class="item item-input">
                    <span class="input-label">Roll No.</span>
                    {{v.id}}
                </label>
                <label class="item item-input">
                    <span class="input-label">CGPA</span>
                    {{v.cgpa}}
                </label>

            </div>
        </div>
    </ion-content>
</ion-view>

Answer 1

执行此操作以获取数据和ID：

<a href="#" id="12345" data-ng-click="ShowId($event)">   

$scope.ShowId = function(event)
{
   $scope.v = event.target.attributes['data'].value;
   $scope.yourWantedId = event.target.id;   
};

Answer 2

将x对象作为函数的参数传递而不是$ event

   <a ng-click="getClickedStudent(x)" class="item" href='#/editStudent' >


   $scope.getClickedStudent = function(student) {
        console.log(student);
    }

获取单击的元素id并使用angularjs在html中使用它

2 个答案: