Question

我查看了我的app-header并查看了正文内容ng-view。基本上我在配置文件正文中有一个ng-model输入，当加载它时，我想将它绑定到标题中的某些内容。

如果ng-model和绑定在同一个视图中我没有问题，但不确定如何让绑定跨越范围：

<!-- 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你会看到很多的报价：＆＃34;如果你没有点，那你就错了＆＃34;。这是因为原型继承的工作方式。

解决方案是将模型定义为父范围中的对象。

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

和

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

在父范围内：

$scope.profile = {};

这样，当模型更新时，不会覆盖对父作用域的引用，但会更新模型数据。

如果您想了解更多关于范围的角度指南，请查看范围的角度指南：https://docs.angularjs.org/guide/scope

修改

这是一个片段，显示它与父/子范围一起使用。它应该对ng-view完全相同，它只是动态添加控制器。

＆＃13;
＆＃13;
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' }; });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如何在不同的视图中使用ng-model / bind？

1 个答案: