Fatal编程技术网
  • javascript/
  • Javascript 从另一个控制器单击按钮时更新第一个控制器的ng型号

Javascript 从另一个控制器单击按钮时更新第一个控制器的ng型号

javascript angularjs

Javascript 从另一个控制器单击按钮时更新第一个控制器的ng型号,javascript,angularjs,Javascript,Angularjs,我有一个angularjs应用程序，其中有两个控制器。我需要通过在第二个控制器中单击按钮来设置或更新第一个控制器输入字段的ng模型。由于第一个控制器的$scope无法从第二个控制器访问，因此可以使用$scope进行访问。我尝试使用$rootScope。这是 html代码 <div ng-controller="MyCtrl1"> <input type="text" ng-model="name" ng-change="ontxtchange(name)"></

我有一个angularjs应用程序，其中有两个控制器。我需要通过在第二个控制器中单击按钮来设置或更新第一个控制器输入字段的ng模型。由于第一个控制器的$scope无法从第二个控制器访问，因此可以使用$scope进行访问。我尝试使用$rootScope。这是

html代码

<div ng-controller="MyCtrl1">
  <input type="text" ng-model="name" ng-change="ontxtchange(name)"></input>
</div>
<div ng-controller="MyCtrl2">

  <button ng-click="myclick()">click</button>
</div>


点击
如果我单击按钮，ng模型将得到更新。但是如果我在单击按钮之前对文本框做了任何更改，$rootScope将不会更新ng模型。那么如何解决呢？

删除
$rootScope
使用普通
$scope
，然后向每个控制器注入新服务

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();
删除
$rootScope
使用普通
$scope
，然后向每个控制器注入新服务

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();
删除
$rootScope
使用普通
$scope
，然后向每个控制器注入新服务

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();
删除
$rootScope
使用普通
$scope
，然后向每个控制器注入新服务

    (function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl1', MyCtrl1);

    MyCtrl1.$inject = ['service'];

    function MyCtrl1($scope, service) {

        $scope.name = service.myScope;
    }
})();
(function () {
    'use strict';
    angular
        .module('myApp', [])
        .controller('MyCtrl2', MyCtrl2);

    MyCtrl2.$inject = ['service'];

    function MyCtrl2($scope, service) {

        $scope.myclick = function () {
            service.myclick();
        };
    }
})();


(function () {
    'use strict';

    angular
        .module('myApp')
        .service('service', service);

    service.$inject = [''];

    function service() {

        var self = this;

        self.myScope = 'anonymous';
        self.myclick = function () {
            self.myScope = 'myname';
        };

        return self;

    }

})();
您应该使用服务来实现这一点，简单地与服务共享值

JS:

HTML:


{{commonValues.testValue}
改变

您应该使用服务来实现这一点，简单地与服务共享值

JS:

HTML:


{{commonValues.testValue}
改变

您应该使用服务来实现这一点，简单地与服务共享值

JS:

HTML:


{{commonValues.testValue}
改变

您应该使用服务来实现这一点，简单地与服务共享值

JS:

HTML:


{{commonValues.testValue}
改变

根据控制器之间的关系，您可以使用$broadcast或$emit

如果您将使用$broadcast，则在第二个控制器中会有类似的内容：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
或使用$emit：

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
$broadcast--将事件向下发送给所有子级

$emit—向上调度事件

如果控制器之间没有关系，您可以使用$rootScope和$broadcast，在第二个控制器中，它将如下所示：

 $rootScope.$broadcast('eventName', value);
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
根据控制器之间的关系，可以使用$broadcast或$emit

如果您将使用$broadcast，则在第二个控制器中会有类似的内容：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
或使用$emit：

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
$broadcast--将事件向下发送给所有子级

$emit—向上调度事件

如果控制器之间没有关系，您可以使用$rootScope和$broadcast，在第二个控制器中，它将如下所示：

 $rootScope.$broadcast('eventName', value);
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
根据控制器之间的关系，可以使用$broadcast或$emit

如果您将使用$broadcast，则在第二个控制器中会有类似的内容：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
或使用$emit：

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
$broadcast--将事件向下发送给所有子级

$emit—向上调度事件

如果控制器之间没有关系，您可以使用$rootScope和$broadcast，在第二个控制器中，它将如下所示：

 $rootScope.$broadcast('eventName', value);
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
根据控制器之间的关系，可以使用$broadcast或$emit

如果您将使用$broadcast，则在第二个控制器中会有类似的内容：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
或使用$emit：

$scope.myclick = function(){
    $rootScope.$emit('eventName', 'myname');
})
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
$broadcast--将事件向下发送给所有子级

$emit—向上调度事件

如果控制器之间没有关系，您可以使用$rootScope和$broadcast，在第二个控制器中，它将如下所示：

 $rootScope.$broadcast('eventName', value);
在您的第一个控制器中：

$scope.myclick = function(){
    $rootScope.$broadcast('eventName', 'myname');
})

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});

$scope.$on('eventName', function(event, value) { 
     $scope.name = value;
});
非常感谢。我将使用$broadcast。我完全理解$broadcast和$emit，但您说过“如果控制器之间没有关系，您可以使用$rootScope和$broadcast”。这意味着什么？如果作用域之间没有父/子关系，那么可以将$broadcast与$rootScope一起使用。如果这对您有效，请不要忘记将其标记为已接受的答案；）非常感谢。我将使用$broadcast。我完全理解$broadcast和$emit，但您说过“如果控制器之间没有关系，您可以使用$rootScope和$broadcast”。这意味着什么？如果作用域之间没有父/子关系，那么可以将$broadcast与$rootScope一起使用。如果这对您有效，请不要忘记将其标记为已接受的答案；）非常感谢。我将使用$broadcast。我完全理解$broadcast和$emit，但您说过“如果控制器之间没有关系，您可以使用$rootScope和$broadcast”。这意味着什么？如果作用域之间没有父/子关系，那么可以将$broadcast与$rootScope一起使用。如果这对您有效，请不要忘记将其标记为已接受的答案；）非常感谢。我将使用$broadcast。我完全理解$broadcast和$emit，但您说过“如果控制器之间没有关系，您可以使用$rootScope和$broadcast”。这意味着什么？如果作用域之间没有父/子关系，那么可以将$broadcast与$rootScope一起使用。如果这对您有效，请不要忘记将其标记为已接受的答案；）