$watch under ion-content tag doesn't work [Solved]

ionic-v1
1

I met a problem about $watch works with ng-modle under ion-content, attach code.

test.html:

<!DOCTYPE html>
<html ng-app="app">
<head>
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="cordova.js"></script>
    <script src="test.js"></script>
    <meta charset=utf-8/>
    <title>test</title>
</head>
<body ng-controller="MainCtrl">
<ion-pane>
    <ion-content>
        <input ng-model="name"/>
    </ion-content>
</ion-pane>
</body>
</html>

test.js:

app = angular.module('app', ['ionic']);

app.controller('MainCtrl', function($scope) {
    $scope.name = "Angular";

    $scope.$watch('name', function()
    {
        alert();
    });
});

In this example, $watch doesn’t work, can’t listen ng-model changes, if you comment in test.html, $watch works right.

Is it a bug of ionicframwork or am I wrong. How to fix it?

2

I think you can not access variables directly over ng-model.

A model is an object.

Try something like:

$scope.data = {
name: ‘Angular’
}

and set watcher, ng-model to data.name

1 Like
3

Thank you, it works for me!

4

Hi,

This trick fix the problem.

But, for anyone that want more information about whats works and whats don’t i found a useful codepen

http://codepen.io/rdelafuente/pen/yiLja