Question

$ scope.watch在离子框架中不起作用

我正在设计一些离子飞行器..它不会工作..相同的代码在空白测试应用程序以及angularjs上正常工作......

我的HTML

<div class="bar bar-header bar-royal">
  <div class="h1 title">Hotel search</div>
</div>
<ion-view>
  <ion-content>

        <h4 style="margin-top:100px;color:#116262;margin-left:10px;font-weight:bold"><i class="icon ion-edit"></i> Request Form</h4>
        <div class="list" style="margin-top:15px;">

            <label class="item item-input item-select">
              <div class="input-label" style="font-weight:bold">
                City
              </div>
              <select ng-model="formData.city">
                <option value="Chennai">Chennai</option>
                <option value="Delhi">Delhi</option>
                <option value="Mumbai">Mumbai</option>
                <option value="Goa">Goa</option>
              </select>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label" style="font-weight:bold">CheckIn</span>
                <input type="date" ng-model="formData.checkIn"  value="{{formData.checkIn |  date:'yyyy-MM-dd'}}">
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label" style="font-weight:bold">checkOut</span>
                <input type="date" ng-model="formData.checkOut"  value="{{formData.checkOut |  date:'yyyy-MM-dd'}}">
            </label>
            <label class="item item-input item-select">
              <div class="input-label" style="font-weight:bold">
                Rooms
              </div>
              <select ng-model="formData.room">
                <option value="1" ng-selected="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select>
            </label>
            <label class="item item-input item-select">
              <div class="input-label" style="font-weight:bold">
                Adults
              </div>
              <select ng-model="formData.adult">
                <option value="1" ng-selected="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
              </select>
            </label>
            <div class="row center" style="margin-top:20px;">
                <button class="button button-outline button-block button-royal" ng-click="submit(formData)" style="text-align:center;">
                      Search
                </button>
            </div>
            {{formData}}
            <input type="text" ng-model="useStars"/>
            {{fooChanges}}
        </div>
  </ion-content>
</ion-view>

我的控制器是

.controller('PlaylistsCtrl', function($scope,$state) {

    $scope.formData ={};
    $scope.formData.checkIn = new Date();
    $scope.formData.checkOut= new Date();
    $scope.formData.checkOut.setDate($scope.formData.checkOut.getDate() + 1);
    $scope.formData.room = 1;
    $scope.formData.city = 'Chennai';
    $scope.formData.adult = 1;
    $scope.useStars = 'balakumaran';
    $scope.fooChanges = 1;

    $scope.$watch(function () {
        return {
            useStars : $scope.useStars,
        }
    },function (value) {
        alert('');
    },true);

    $scope.submit = function(formData){
      $state.go('app.search',{formData:formData});
    }

})

上面代码的问题是什么？ ..我尝试了很多次..如果没有其他想法的话，那就赢了。

Answer 1

在按钮中，您将 formData 作为参数

传递

<button class="button button-outline button-block button-royal" ng-click="submit(formData)" style="text-align:center;">
                      Search
                </button>

在你的控制器中没有formData参数被引用，除了你的搜索按钮，就像你应该传递useStars一样。

.controller('PlaylistsCtrl', function($scope,$state) {
     formData ={};
    formData.checkIn = new Date();
    formData.checkOut= new Date();
    formData.checkOut.setDate($scope.formData.checkOut.getDate() + 1);
    formData.room = 1;
    formData.city = 'Chennai';
    formData.adult = 1;
    $scope.useStars = 'balakumaran';
    $scope.fooChanges = 1;

    $scope.$watch(function () {
        return {
            useStars : $scope.useStars,
             $state.go('app.search',{formData:formData});
        }
    },function (value) {
        alert('');
    },true);

   $scope.submit = function(formData){
      $state.go('app.search',{formData:formData});
    }
});

如果发生某些事件，在表格angularjs本身创建范围变量之前，您不需要$ scope。

但是没有发生任何事件，因此PlaylistCtrl无法理解$ scope.formData，因此请尝试使事件显示或尝试理解$scope。

这样有助于双向数据绑定

Answer 2

正如评论中所述，问题已解决，执行以下操作：

<input type="text" ng-model="$parent.useStars"/>

然而，永远不会遇到此问题的最佳方法是：始终使用像$scope.data.userStarts这样的内部对象。所以你永远不需要$parent技巧，这在Angular中被称为点符号，并且是由于javascript继承的限制。

$ scope.watch不适用于离子框架

2 个答案: