使用ng-click angular中的控制器视图中的数据

时间:2016-09-07 14:26:12

标签: javascript angularjs ionic-framework

角度很新,从控制器获取数据并使用离子在视图中显示时遇到一些麻烦。

我在控制器中有一个功能(' DashCtrl'),我通过使用ng-click传递一个字符串以在函数中使用。现在我只想拿这个字符串并在下一个视图中显示它,因为我在同一个元素上有一个href-click事件。

当我在下一页上记录字符串时,它正在工作并显示出来。如何在视图中使用它?

下面是代码:

HTML

*第一页

<ul contentful-entries>
  <div ng-repeat="story in $contentfulEntries.items">
    <li class="story col col-100">
      <a href="#/tab/story/{{story.fields.slug}}" ng-click='storyDetails("{{story.fields.title}}")'>
        <p>{{ story.fields.title }}</p>
      </a>
    </li>
  </div>
</ul>

*在ng-click

上重定向到此
<ion-view view-title="Story">
  <ion-nav-buttons side="left">
    <button class="button back-button buttons button-clear header-item" ng-click="goBack()">
      <i class="icon ion-ios-arrow-back"> Back</i> 
    </button>
  </ion-nav-buttons>
  <ion-content>
    <ion-list ng-controller="DashCtrl">
      <h1>{{ story.slug }} </h1>
      <p> <!-- HERE IS WHERE I WANT TO DISPLAY THE STRING --> </p>   
    </ion-list>
  </ion-content>
 </ion-view>

*继承我的控制器

.controller('DashCtrl', function($scope, $stateParams, $ionicHistory) {

  $scope.storyDetails = function($scope, details) {
    // here is the data i need to display in the view
    // the console.log shows up in the browser
    console.log(details);
  }

  $scope.goBack = function(){
    $ionicHistory.goBack();
  }

  // this is working fine
  $scope.story = $stateParams;
})

3 个答案:

答案 0 :(得分:0)

将详细信息字符串保存为控制器变量,然后您可以在视图中访问它。

答案 1 :(得分:0)

将变量details分配给其他变量,例如$scope.newVar = details,然后在您的视图中,您可以通过以这种方式{{newVar}}绑定它来显示它。

希望你明白了。

答案 2 :(得分:0)

我最终使用了$ rootScope。我知道这可能不是最好的解决方案,但我现在只是想抓住Angular。

在我的控制器中,我使用了

.controller('DashCtrl', function($scope, $stateParams, $rootScope, $ionicHistory) {

  $scope.goBack = function(){
    $ionicHistory.goBack();
  }

  $scope.storyDetails = function(details) {
    $rootScope.details = details;
    return $rootScope.details;
  }
})

然后我可以在另一个控制器中使用$ rootScope.details在我需要字符串的函数中使用。

我知道我不是以Angular的方式做这件事,所以如果有人能够告诉我如何在不使用rootScope的情况下“正确地”做到这一点,我将永远为你负债。