Angular js 从一个控制器从另一个控制器继承属性

Angular js inherit properties of one controller form another controller

本文关键字：控制器 属性 另一个 继承 一个 js Angular      更新时间：2023-09-26

我是角度的初学者。帮我写这段代码。.

如何将调用控制器的名称属性继承给我的控制器？我不知道如何在这段代码中使用广播... 

<script type="text/javascript">
    function callme($scope)
    {
        $scope.name="anand";
    }
    function mee($scope)
    {
        $scope.age="34";
    }
</script>
<div ng-controller="callme">
    <p>Name: <input type="text" ng-model="name"></p>
    hello {{name}}!
</div>
<div ng-controller="mee">
    <p>age:<input type="text" ng-model="age"></p>
    hello {{name}} {{age}}!!!
</div>

因此，您可以使用控制器继承，但这意味着一个控制器需要位于另一个控制器内部。这不是您在示例 HTML 中所做的。

但是，所有控制器共享 1 个 rootScope，因此您可以沿着从 rootscope 向下广播事件到所有控制器的道路。

这是小提琴：http://jsfiddle.net/qabpfbug/2/

var myApp = angular.module('myApp',[]);
myApp.controller('callme', [ '$scope', '$rootScope', function($scope, $rootScope) {
    $scope.name = 'John Doe'; 
    $scope.$watch('name', function(newValue, oldValue) {
        $rootScope.$broadcast('nameChanged', newValue);
    });
}]).controller('mee', [ '$scope', function($scope) {
    $scope.$on('nameChanged', function(event, value) {
        $scope.name = value;
    });
}]);

让我指出几点：

  • 以这种方式表示控制器的符号可以使您的代码最小化（无论您想怎么称呼它都丑化）。该数组保存依赖项的名称，然后将其注入控制器函数。
  • 因此，首先我们$watch $scope.name 对象。AngularJS将检查此对象的值是否发生变化，并在它发生变化时调用该函数。在这个函数中，我们转到$rootScope并使用新值调用$broadcast。所以这与$emit
  • 在"me"控制器上 - 我们正在侦听"nameChanged"事件，并使用提供的值更新该控制器内的 $scope.name 对象。

这是工作小提琴 http://jsfiddle.net/qabpfbug/1/

您可以使用$rootScope但我建议您使用服务来共享数据黑白控制器。

 function callme($rootScope)
    {
        $rootScope.name="anand";
    }
    function mee($scope)
    {
        $scope.age="34";
    }
相关文章：