Jquery mobile AngularJS+JQM中select上的ng模型部分起作用_Jquery Mobile_Angularjs

Jquery mobile AngularJS+JQM中select上的ng模型部分起作用

jquery-mobile angularjs

Jquery mobile AngularJS+JQM中select上的ng模型部分起作用,jquery-mobile,angularjs,Jquery Mobile,Angularjs,对于基于AngularJS、JQuery Mobile和JQuery Mobile Angular Adapter的应用程序当我将ng控制器设置在data role=page的标记上时，select标记上的ng模型工作得非常好： <body ng-app> <div data-role="page" id="product" ng-controller="Controller"> <div data-role="content">

对于基于AngularJS、JQuery Mobile和JQuery Mobile Angular Adapter的应用程序

当我将ng控制器设置在data role=page的标记上时，select标记上的ng模型工作得非常好：

<body ng-app>
    <div data-role="page" id="product" ng-controller="Controller">
        <div data-role="content">
            <select ng-model="color" ng-options="c for c in colors"></select>
            <button ng-click="Print()">print</button>

当ng控制器出现在body标签中时，与通过ng模型选择标签关联的变量保持不变：

<body ng-app ng-controller="Controller">
    <div data-role="page" id="product">
        <div data-role="content">
            <select ng-model="color" ng-options="c for c in colors"></select>

为什么以及如何修复它？我想在应用程序中使用一个控制器和多个页面

在页面的html中包含ng应用程序将解决此问题

试一试

更新了这里的fiddle

，看起来这里真的有两个作用域。页面有自己的作用域，但打印在父作用域中。我已经更新了小提琴，以显示颜色确实发生了变化，但打印的$scope.color没有：

为了纠正这种特殊情况，我将从DOM传入要打印的颜色：

    <body ng-app ng-controller="Controller">
        <div data-role="page" id="product">
            <div data-role="content">
                <select ng-model="color" ng-options="c for c in colors"></select>
                <button ng-click="Print(color)">print</button>
            </div>
        </div>
    </body>

对于这种多范围的情况，我目前没有找到一个通用的解决方案。

不幸的是，没有任何变化，它是有效的！但当我在ng模型中设置JQM attr data role=page时，保持不变！这似乎是工作在铬良好。你怎么测试？在Chrome下测试，Safari！打开，将颜色从红色更改为白色或黑色，然后选中$scope.color$scope.color将为“红色”！你说得对，谢谢！我找到了关于这个的文档。我的错误-在阅读文档之前使用。例如：jquery mobile的每个页面都有一个单独的作用域。和解决方案：对于页面之间的通信，请使用ngm shared controller指令

var myApp = angular.module('myModule',[]);
myApp.controller('Controller', function($scope) {
   $scope.colors = ['red', 'black', 'white'];
    $scope.color = $scope.colors[0];

    $scope.Print = function () {
        alert($scope.color);
    };
});

    <body ng-app ng-controller="Controller">
        <div data-role="page" id="product">
            <div data-role="content">
                <select ng-model="color" ng-options="c for c in colors"></select>
                <button ng-click="Print(color)">print</button>
            </div>
        </div>
    </body>