求助:angularjs router中model更新的问题

水木社区手机版

主题:求助:angularjs router中model更新的问题
楼主|XMI|2015-10-26 15:42:45|只看此ID
刚写了一堆，断线...简单求助一下，在ionic router中，使用了model，结果只能第一次

显示和访问到，后续页面值变动，反馈不到$scope中，debug一下，看到在this中起了一个

新对象，不知什么机制。直接上代码

<!DOCTYPE html>
<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">
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css"
        rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js">
        </script>
  </head>
  <body>

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>
    <script id="templates/tabs.html" type="text/ng-template">
      <ion-tabs class="tabs-icon-top tabs-positive"  >
        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>

    <script id="templates/facts.html" type="text/ng-template">
      <ion-view view-title="Facts"   >
        <ion-content class="padding">
            <input type="text" name="hello" ng-model="Hello">
            <button id="Request_Picture" class="button"
                ng-click="sayHello()">测试Model</button>
        </ion-content>
      </ion-view>
    </script>

    <script type="text/javascript">
    var myApp = angular.module('ionicApp', ['ionic']);
    myApp.config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
        })

        .state('tabs.facts', {
          url: "/facts",
          views: {
            'home-tab': {
              templateUrl: "templates/facts.html",
              controller: 'FactsCtrla'
            }
          }
        });

       $urlRouterProvider.otherwise("/tab/facts") ;
    });

     myApp.controller('FactsCtrla', function($scope, $window) {
        $scope.Hello = "first";

        $scope.sayHello = function(){
          $window.alert("$scope.Hello:" + $scope.Hello + "\n"
                + "this.Hello:" + this.Hello);
          console.log("$scope.Hello:" + $scope.Hello + "\n"
                + "this.Hello:" + this.Hello);
                 };

    });
    </script>
  </body>
</html>

--
修改:XMI FROM 219.142.1.*
FROM 219.142.1.*
1楼|XMI|2015-10-26 15:54:29|只看此ID
可能找到原因了，就是不要直接用$scope+属性变量的方式，要把变量封装成一个对象

参考：http://blog.jobbole.com/80634/

作为一个经验法则,我们必须总是在绑定时使用”.“。这就是说我们应该绑定到scope的对象,而不是直接的属性,否则可能会在子$scope导致意外的行为,因为$scope基于Java-script的原型继承机制。

Scope 的目的是引用 model，而不是成为 model。
Model是我们的JavaScript对象

【在 XMI (自由VS一无所有:找个没人的地方想想理想) 的大作中提到: 】
: 刚写了一堆，断线...简单求助一下，在ionic router中，使用了model，结果只能第一次
: 显示和访问到，后续页面值变动，反馈不到$scope中，debug一下，看到在this中起了一个
: 新对象，不知什么机制。直接上代码
: ...................
--
FROM 219.142.1.*
2楼|dhcn|2015-10-26 16:07:51|只看此ID
把贴的代码重新排版一下。
【在 XMI 的大作中提到: 】
: 刚写了一堆，断线...简单求助一下，在ionic router中，使用了model，结果只能第一次
: 显示和访问到，后续页面值变动，反馈不到$scope中，debug一下，看到在this中起了一个
: 新对象，不知什么机制。直接上代码
: ...................
--
FROM 123.66.180.*
3楼|XMI|2015-10-26 16:56:09|只看此ID
调整了，多谢。

term老用户不会用ascii标注颜色，也比较土了。。。

【在 dhcn (coder) 的大作中提到: 】
: 把贴的代码重新排版一下。
--
FROM 219.142.1.*
4楼|kooais|2015-10-29 10:59:53|只看此ID
个人觉着，这个是javascript 基本数据类型是传值的，对象数据类型是传地址的，如果你把model里面的数据类型改成一个对象类型，通过.访问就可以操作了
--
FROM 123.232.37.*