Question

我正在尝试角度指令，我很困惑。

我有四个指令：person，personWholeName，personFirstName和personLastName。 person调用personWholeName指令。 personWholeName调用personFirstName和personLastName指令。但是当我使用person指令时，我没有看到personLastName指令被渲染。

这是我的HTML：

<script type="text/ng-template"    id="partials/personFirstName.html">
    <span>{{first}}</span>
</script>

<script type="text/ng-template"    id="partials/personLastName.html">
    <span>{{last}}</span>
</script>

<script type="text/ng-template" id="partials/personWholeName.html">
    <div>
        <person-first-name first="name.first" />
        <person-last-name last="name.last" />
    </div>
</script>


<script type="text/ng-template" id="partials/person.html">
    <div>
        <person-whole-name name="person.name" />
    </div>
</script>

<div ng-controller="MainAppController">
    First Name: <input type="text" ng-model="person.name.first" /><br/>
    Last Name: <input type="text" ng-model="person.name.last" /><br/>
    <person person="person" />
</div>

然后是我的剧本：

'use strict;'

var mainApp = angular.module('mainApp', ['personModule'])
    .controller('MainAppController', function MainAppController($scope) {
        $scope.person = {
            name: {
                first: "John",
                last: "Smith"
            }
        };
    });

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

personModule.directive('personFirstName', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/personFirstName.html',
        scope: {
            first: '='
        }
    };
});

personModule.directive('personLastName', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/personLastName.html',
        scope: {
            last: '='
        }
    };
});

personModule.directive('personWholeName', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/personWholeName.html',
        scope: {
            name: '='
        }
    };
});

personModule.directive('person', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'partials/person.html',
        scope: {
            person: '='
        }
    };
});

关于为什么姓氏不会被呈现的任何想法？

Answer 1

这是因为你试图在同一级别获得2个指令以使用不同的范围。例如，使用span来分隔它们可以解决问题

http://jsfiddle.net/S2cQD/6/

Answer 2

您的代码完全没有问题。它的工作原理是：

Working Plunker

jsFiddle可能有问题。

Angular指令未按预期呈现

2 个答案: