如何从另一个视图中清除一个视图的输入值？

Question

我的场景非常简单直接。但我无法得到准确的输出。

就我而言，我有两个名为 Index.htm、Main.htm 的 html 页面和一个名为 mscript.js 的脚本页面。 Index.htm 由一个按钮（清除）组成，Main.htm 由一个输入类型字段组成。

我想要的是：

点击按钮时（从索引视图），用户在输入类型字段（从主视图）中输入的文本必须被清除。

我尝试的是

我已经使用了配置块。

Index.htm：

<div data-ng-app="mangular">
    <div data-ng-controller="mcontroller">Strictly for Demo Purpose
        <br />
        <br />
        <br />
        <div data-ng-view=""></div>
        <br />
        <button type="submit" data-ng-click="clear()">Clear</button>
    </div>
</div>

Main.htm

<div>
  Type your Name : 
  <input type = "text" data-ng-model = "demotext" />
</div>

mscript.js

 var mangular = angular.module('mangular', ['ngRoute']);

mangular.config(function ($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: 'Main.htm'
    })
});

mangular.controller('mcontroller', function ($scope) {

    //var test = mfactory.getinput();
    $scope.clear = function () {
        $scope.demotext = ""; // This is the place where I'm expecting solution
    }
});

Answer 1

使用 $broadcast，angularjs 的内置服务。在第一页按钮单击广播内容，然后在您的第二页接收广播事件并清除输入元素上的数据。

来自mcontroller

$rootScope.$broadcast("cleardata", anyObject);  // here you are broadcasting some data which is identified the a name/key that is for this example 'cleardata'

在Main.htm

的控制器中

$rootScope.$on("cleardata", function (event, objectData) {
    // do whatever you want and clear the textbox
});

Answer 2

试试这个：http://jsfiddle.net/sherali/Mh2UH/31/

但是， - 我将控制器添加到`$routeProvider.

• 在里面，我添加了$scope.$watch。

然后就可以了

var myApp = angular
    .module('myApp', ['ngRoute'])
    .config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                template: '<div>Type your Name : <input type = "text" ng-model = "text" /></div>',
                controller: 'viewCtrl'
            })
            .otherwise({
                redirectTo: '/'
            });
    })

...

myApp.factory('aProvider', function () {
    return {
        text: "default Text"
    }
});

...

myApp.controller('myCtrl', function ($scope, aProvider) {
    $scope.clear = function () {
        aProvider.text = "";
    }
});

myApp.controller('viewCtrl', function ($scope, aProvider) {
    $scope.$watch(function () {
        return aProvider.text;
    }, function (val) {
        $scope.text = val;
    })

    $scope.$watch('text', function (val) {
        aProvider.text = val;
    })
});

Answer 3

为 Main.html 创建一个控制器，例如 mainctrl，然后从 mcontroller 像这样访问它 $scope.$parent.mainctrl.demotext = "";