Question

我正在关注YouTube tutorial以了解控制器之间的数据共享。出于某种原因，这两个输入不会返回共享数据（不可绑定）。任何人都可以让我知道我的代码有什么问题吗？

 <!DOCTYPE html>
    <html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="/css/app.css?2">
        <script src="/bower-foundation/js/vendor/modernizr.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?2"></script>
        <!-- angularjs -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
        <script>
            var myApp = angular.module('myApp', []);

            myApp.factory('Data', function(){
                return {msg:"I am data from a service"}
            })

            function firstctrl($scope, Data) { 
                $scope.data = Data;
            }
            function secondctrl($scope, Data) {
                $scope.data = Data;
            }
        </script>
    </head>
    <body ng-app="myApp">


        <div ng-controller="firstctrl">
            <input type="text" ng-model="data.msg">
            <h1>{{data.msg}}</h1>
        </div>


        <div ng-controller="secondctrl">
            <input type="text" ng-model="data.msg">
            <h1>{{data.msg}}</h1>
        </div>


    <!-- javascript -->
        <script src="/bower-foundation/js/foundation.min.js?3"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.11/fastclick.min.js?2"></script>
        <script src="/js/min/app.min.js?3"></script>
    </body>
    </html>

Answer 1

它工作正常，看看这个

<强> Working Demo

<强> HTML

<div ng-app='myApp'>
    <div ng-controller="firstctrl">
        <input type="text" ng-model="data.msg" />
         <h1>{{data.msg}}</h1>

    </div>
    <div ng-controller="secondctrl">
        <input type="text" ng-model="data.msg" />
         <h1>{{data.msg}}</h1>

    </div>
</div>

<强> SCRIPT

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

myApp.factory('Data', function () {
    return {
        msg: "I am data from a service"
    };
})

function firstctrl($scope, Data) {
    $scope.data = Data;
}

function secondctrl($scope, Data) {
    $scope.data = Data;
}

另外看看这个东西

<强> AngularJS - Sharing variables between controllers

Angularjs使用工厂在控制器之间共享数据

1 个答案: