Question

适用于基于AngularJS，JQuery Mobile和JQuery Mobile Angular Adapter的应用程序。

当我在带有data-role =“page”的标签上设置ng-controller时，选择标签上的ng-model工作正常：

<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>

http://jsfiddle.net/ilya7u/Ddt7G/

当ng-controller存在于body标签中时，通过ng-model与select标签关联的变量保持不变：

<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>

http://jsfiddle.net/ilya7u/qgbj2/

为什么以及如何解决这个问题？我想在应用程序中使用一个控制器，页面很多！

Answer 1

在页面的html中包含ng-app将解决问题

试

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

并将控制器更改为

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);
    };
});

在这里更新了小提琴http://jsfiddle.net/qgbj2/2/

Answer 2

所以看起来这里有两个范围。页面有自己的范围，但Print位于父范围内。我已经更新了小提琴以显示颜色确实发生了变化，但Print中的$ scope.color不会：http://jsfiddle.net/qgbj2/6/

为了解决这种特殊情况，我会将颜色从DOM中传递给Print：

    <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>

目前我还没有针对这种多范围情况的一般解决方案。

AngularJS + JQM中选择的ng-model部分工作

2 个答案: