-1

angularでディレクティブを試していますが、戸惑っています。

http://jsfiddle.net/S2cQD/2/

person、personWholeName、personFirstName、personLastName の 4 つのディレクティブがあります。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: '='
        }
    };
});

姓がレンダリングされない理由についてのアイデアはありますか?

4

2 に答える 2

1

これは、異なるスコープを使用するために同じレベルで 2 つのディレクティブを取得しようとしているためです。たとえば、 a を使用spanしてそれらを分離すると、問題が解決します

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

于 2013-06-08T13:17:09.350 に答える
0

あなたのコードにはまったく問題はありません。そのままの動作：

ワーキングプランカー

jsFiddle に問題がある可能性があります。

于 2014-06-05T05:23:37.530 に答える