1

ngRoute を使用して Angular シングルページ アプリを作成しています。コンポーネントベースのバージョンに移行したい。

問題は孤立したスコープです。メインコントローラーの小道具とメソッドにアクセスする必要があります。バインディングを使用しようとしていますが、機能しません。私はこれで問題を見つけることができません。このアプリは、コンポーネントを使用しなくても問題なく動作します。ホームページ ビューをコンポーネントに変更しようとすると、クラッシュします。コードの主要部分は次のとおりです。

フレームワーク

<html ng-app="angularModule" >
<body ng-controller="angularController as angCtrl" >
    <div ng-show="angCtrl.user.isLoggedIn" >Sign Out</div>
    <div ng-hide="angCtrl.user.isLoggedIn" cd-visible="angCtrl.showSignIn">Sign In</div>
    <div id="contentLayer" class="contentLayer" ng-view ></div>

ホームページテンプレート

<h1 class="pageLabel" >HomePage</h1>
<blockquote>This can be anything. No bindings.</blockquote>

angularController

var app = angular.module ('angularModule', ['ngRoute'] );

app.directive ('cdVisible', 
    function () {
        return  function (scope, element, attr) {
                    scope.$watch (attr.cdVisible, 
                        function (visible) {
                            element.css ('visibility', visible ? 'visible' : 'hidden');
                        }
                    );
                };
    }
);

app.config ( [ '$locationProvider', '$routeProvider',
    function config ($locationProvider, $routeProvider) {
        $locationProvider.hashPrefix ('!');
        $routeProvider
        .when ('/sign-in', {
            templateUrl:    '/ng-sign-in',
            controller:     signInController
        })
        ... more routes
        .when ('/home', {
            template:   '<home-page showSignIn="angCtrl.showSignIn" menuSelect="angCtrl.menuSelect" ></home-page>'
        })
        .otherwise ('/home');
    }
]);

function homePageController () {
    this.menuSelect ('Devices');  // this statement has no effect on angularController.menuSelection chrome shows it as an anonymous function
    this.showSignIn = false;  // this bombs: Expression 'undefined' in attribute 'showSignIn' used with directive 'homepage' is non-assignable!
}

app.component ('homePage', {
    templateUrl:    '/ng-homepage',
    controller:     homePageController,
    bindings: {
        menuSelect: '&',
        showSignIn: '='
    }
});

app.controller ('angularController', [ '$http', '$window', '$location',
    function ($http, $window, $location) {
        var self = this; 
        this.user = {
            "isLoggedIn":       false
        };
        this.showSignIn = true;
        this.menuSelection = "";
        this.errorMessage = "";
        this.menuSelect = 
            function (selection) {
                self.menuSelection = selection;
            };
        this.setUserData =
            function (userData) {
                self.user = userData;
            };
        this.setShowSignIn =
            function (show) {
                self.showSignIn = show;
            };
        this.menuSelect ('');
        this.getUserData();     // I removed this for this post
    }
]);

例外がスローされる場所にコメントを追加しました。ホームページ コントローラーは、angularController のモデルを更新しようとします。1 つ目は何もせず、2 つ目は例外をスローします。私は何を間違っていますか？

4

2 に答える 2

2

まず第一にshowSignInプリミティブであるため、angular は とまったく同じ方法で処理しshowSignIn="7+2"ます。コンポーネント内でその値を変更する必要がある場合は、showSignInプロパティを持つオブジェクトを使用する必要があります。

今menuSelectは少し厳しいです、おそらくChromeコンソールは次のようなものを示しています

function (locals) {
    return parentGet(scope, locals);
}

これは、参照をangCtrl.menuSelectコンポーネントに渡しているだけだからです。

menuSelect内部から関数を実行するにhomePageControllerは、(HTML で) 行う必要があります。

<home-page menu-select="angCtrl.menuSelect(myMsg)"></home-page>

そして、コンポーネントのコントローラーで次のように呼び出します。

this.menuSelect({ myMsg:"Devices" })

HTML 内の(myMsg)は、この参照を返すための angular への呼び出しです。次に、実行時に、{ myMsg:"Devices" }先ほど行った参照内のパラメーターと一致するようにパラメーターを渡します。より詳細に説明しているこの回答を確認できます。

于 2016-12-04T08:02:40.673 に答える