如何保存ng-include的值并在以后使用

时间:2014-09-23 14:15:29

标签: angularjs ionic-framework

我被封锁了,不能跟随,看看是否有人可以帮助我...(对不起我的英语不好和我的解释)。

我有这支笔,我有一个输入来插入一个值或加载默认值。 NgStorage如果重新加载应用程序,我用它来存储内存中的值,并始终在输入中加载用户类型(localStorage)。

在我有一个下拉列表后,我选择了两个数字中的一个,这个数字向我收取了我在以下div中创建的两个模板之一(或template1 template2)。

最右边,但现在我想以任何方式保存该结果,以便下一个div(红色边框)执行上面选择的简单算术运算,使用从一开始就在驱动程序中声明的范围变量。

请帮忙吗?

这是我的笔(我使用离子):http://codepen.io/maestromutenrroy/pen/ukwIC

    <html ng-app="ionicApp"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Ionic....</title>

    <link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
    <script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
  </head>
  <body ng-controller="MainCtrl">

    <ion-header-bar class="bar-positive">
      <h1 class="title">Hello!</h1>
    </ion-header-bar>

    <br /><br /><br />
    <!-- load 11, but I change the valor -->
    Write a number: <input type="number" ng-model="$storage.c6" style="border: 1px solid #ddd; padding-left: 10px">
    <br>
    <!-- select of two templates -->
    Select one option:
    <select ng-model="template" ng-options="t.name for t in templates">
      <option value="">(blank)</option>
    </select>
    <!-- print a template select -->
    <div ng-include src="template.url" onload='myFunction()'></div>

    <!-- template1.html -->
    <script type="text/ng-template" id="template1.html">
      {{1000 - $storage.c6}}
    </script>

    <!-- template2.html -->
    <script type="text/ng-template" id="template2.html">
      {{10 - $storage.c6}}
    </script>

    <br>
    <hr />
    <div style="border: 2px solid red; padding: 20px">
      Now, I would like a same operation (result of template1 or template2 - $storage.c12): .....
    </div>

  </body>
</html>

  angular.module('ionicApp', ['ionic','ngStorage'])

  .controller('MainCtrl', function($scope, $localStorage) {

  $scope.$storage = $localStorage.$default({
      c6: 1,
      c12: 2
  });

  $scope.templates = [{
      name: '5',
      url: 'template1.html'}
      ,
      {
        name: '10',
        url: 'template2.html'}];
    $scope.template = $scope.templates[0];

 })

谢谢!

1 个答案:

答案 0 :(得分:1)

您可以将结果保存在scope对象中,并在每个模板中进行更新:

<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
  {{results.x = 1000 - $storage.c6}}
</script>

<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
  {{results.x = 10 - $storage.c6}}
</script>

<div style="border: 2px solid red; padding: 20px">
  Now, I would like a same operation (result of template1 or template2 - $storage.c12): ..... {{results.x - $storage.c12}}
</div>

在控制器上:

$scope.results = {};

<强> Demo