다른보기에서 ng-model/bind를 사용하는 방법은 무엇입니까?

Question

본인은 app-header에 대한 조회가 가능하며 본문 내용 ng-view에 대한 조회가 있습니다. 기본적으로 프로필 본문에 ng-model 입력이 있으며로드 될 때 헤더의 어떤 것에 바인딩하려고합니다. NG-모델과 바인딩이 같은 뷰에있는 경우

나는 아무 문제가 없지만, 범위를 가로 질러 이동하는 바인딩을 얻을하는 방법을 잘 :

<!-- Main Nav --> 
<app-header></app-header> 

<div class="content_container"> 
    <!-- angular templating content will be injected here --> 
    <div ng-view></div> 
</div> 

입력 프로파일 구성 요소에서

<input ng-model="profile_name" type="text" id="profile_first_name" name="profile_first_name"/> 

헤더

<div class="user_badge">{{profile_name}}</div> 

헤더 지침

// Directive for Header 
app.directive('appHeader', function() { 
    // Type of Directive, E for element, A for Attribute 
    // url of a template 
    return { 
     restrict: 'E', 
     templateUrl: 'shared/navigation/header.html' 
    }; 
}); 

ProfileController

// Controller for Profile 
app.controller('ProfileController', function() { 
}); 

// Controller for Complete Registration 
app.controller('CompleteRegistrationController', function() { 
}); 

// configure our routes 
app.config(['$routeProvider', function($routeProvider) { 
    $routeProvider 

    // route : Edit Profile 
    .when('/profile', { 
     title : 'Edit Profile', 
     templateUrl : 'components/profile/edit-profile.html', 
     controller : 'ProfileController' 
    }); 
}]); 

Answer 1

난 당신이 상위/하위 범위 지정에 문제가있는 것 같은데요. ng-model에 대한 견적이 많이 나옵니다. "점이 없으면 잘못하고있는 것입니다." 프로토 타입 상속이 작동하는 방식 때문입니다.

해결 방법은 모델을 부모 범위의 개체로 정의하는 것입니다.

<input ng-model="profile.name" type="text" /> 

및

<div class="user_badge">{{profile.name}}</div> 

그리고 부모 범위

:

$scope.profile = {}; 

이 방법, 모델이 덮어 쓰지 않습니다 부모 범위에 대한 참조를 업데이트되지만 모델 데이터 업데이트됩니다.

당신이 정말로 작동 방법에 대한 자세한 내용을 원한다면 범위의 각도 가이드를 살펴 보자 : https://docs.angularjs.org/guide/scope

---

편집 여기

을 보여주는 조각이 부모/자녀와 함께 일하고을 범위. 컨트롤러를 동적으로 추가하는 ng-view에 대해서도 똑같이 작동해야합니다.

angular.module('test', []) 
 
    .directive('appHeader', function() { 
 
    return { 
 
     restrict: 'E', 
 
     template: '<div class="user_badge">{{profile.name}}</div>' 
 
    }; 
 
    }) 
 
    .controller('ChildCtrl', function() { 
 
    }) 
 
    .controller('ParentCtrl', function($scope) { 
 
    $scope.profile = { 
 
     name: 'Test' 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test"> 
 
    <div ng-controller="ParentCtrl"> 
 
    <app-header></app-header> 
 

 
    <div ng-controller="ChildCtrl"> 
 
     <input ng-model="profile.name" type="text" /> 
 
    </div> 
 
    </div> 
 
</div>