AngularJS在非嵌套div中使用同一控制器_Angularjs_Angularjs Controller

AngularJS在非嵌套div中使用同一控制器

angularjs

AngularJS在非嵌套div中使用同一控制器,angularjs,angularjs-controller,Angularjs,Angularjs Controller,我有两个独立的div，如下面的代码所示。我试图做的是从第一个div更新控制器，然后使用相同的控制器检测第二个div中的更改。当我按下按钮时，控制台上会打印“我在这里”，但第二部分中的数据不会更新。它应该改为“点击” 下面的div不应嵌套点击我 {{段落} var-app=angular.module（'app'，[]）；功能控制器1（$scope）{ $scope.paragration='首字母'； $scope.buttonClick=函数（）{ log（“我在这里”）； $scope

我有两个独立的div，如下面的代码所示。我试图做的是从第一个div更新控制器，然后使用相同的控制器检测第二个div中的更改。当我按下按钮时，控制台上会打印“我在这里”，但第二部分中的数据不会更新。它应该改为“点击”


下面的div不应嵌套
点击我
{{段落}
var-app=angular.module（'app'，[]）；
功能控制器1（$scope）{
$scope.paragration='首字母'；
$scope.buttonClick=函数（）{
log（“我在这里”）；
$scope.paragration=“单击”；
};
}

我如何解决这个问题？还有什么问题？是不是因为两个div的$scope不同

谢谢

您可能应该使用服务/工厂共享数据

您还可以使用那里的数据创建一个父控制器，并从子控制器引用它，但共享服务似乎更好

是的，您有两个单独的作用域，因此它们彼此不交互。

这意味着我应该有两个单独的控制器。第一个控制器广播事件，第二个控制器捕获事件，然后更新作用域？我的另一个问题是，有没有一种方法可以用一个控制器来实现呢？我使用了两个独立的控制器，通过触发广播事件来实现。我还维护一个单独的共享工厂，因为有时我需要检查是否在第一个控制器中选择了数据。学习使用angular时常见的误解是控制器的实例将是相同的，而不是相同的。每个元素都有自己的实例

<html ng-app="app">
<head>
    <title></title>
</head>
<body>

    <h1>Divs below should not be nested</h1>

    <div id="notNested1" ng-controller="Controller1">
        <button ng-click="buttonClick()">Click me</button>
    </div>
    <div id="notNested2" ng-controller="Controller1">
        <p>{{paragraph}}</p>
    </div>

    <script type="text/javascript" src="libs/angular/angular.js"></script>

    <script>
        var app = angular.module('app', []);

        function Controller1($scope) {

            $scope.paragraph = 'initial';

            $scope.buttonClick = function () {
                console.log('i am here');
                $scope.paragraph = "clicked";
            };
        }
    </script>
</body>
</html>