Question

我有一个HTML页面

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="dependency/jquery/jquery-2.1.4.min.js"></script>
    <script src="dependency/angular/angular.min.js"></script>

    <script src="js/main_app.js"></script>

</head>
<body ng-app="NMEFApp">
    <form>
        <div ng-controller="MainController">
            First Name :
            <input type="text" id="txtFirstName" ng-model="Person.firstName" />
            <br />
            Last Name:
            <input type="text" id="txtLastName" ng-model="Person.lastName" />
            <br />

            <input type="button" ng-click="init();" value="Initialize" id="btnInit" />
            <div>
                Hello :  {{ Person.firstName }}&nbsp;{{ Person.lastName }}
            </div>

            <employee-information childperson="Person"></employee-information>
            <employee-information childperson="Child"></employee-information>

        </div>
    </form>
</body>
</html>

和app.js文件

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

NMEFApp.controller("MainController", function ($scope) {
    $scope.Person = { firstName: 'Initial', lastName: 'Name' };
    $scope.Child = { childName: 'Ahnaf', childAge: 2}

    $scope.init = function () {

        // $scope.Person = new Object();
        $scope.Person.firstName = "T";
        $scope.Person.lastName = "R";
    }
});

NMEFApp.directive("employeeInformation", function () {
    return {
        restrict: 'E',
        scope: {
            childperson: "="
        },
        templateUrl: 'templates/EmployeeInformationTemplate.html',
        controller: function ($scope) {
            $scope.ClickTest = function () {
                alert($scope.childperson);
            }
        }
    };
});

我的templateUrl的html模板是

<div style="width:100%;background-color:black;color:white;font-weight:bold">
    Employee Information
</div>
<div>
    Showing details of {{ childperson.firstName}} {{childperson.lastName}}
    <br />
    Showing the details of child {{childperson.childName}}
    <!--<input type="button" id="btnTest" name="btnTest" value="Test" ng-click="ClickTest();" />-->
</div>

我在模板页面中获取人数据，但未在模板页面中获取子数据。我通过指令传递了 Child 数据，就像我传递人数据一样

为什么我没有在模板中获取 Child 数据？

为什么范围变量数据没有通过AngularJS中的指令传递？

0 个答案: