2

如果我在这里遗漏了一个简单的概念，我很抱歉。我已经使用大量指令开发了我的应用程序，以放入我网站的各个部分。他们有一个模板和一个控制器，我在直接内部分配控制器。我打算在网站的其他地方使用这些位

 <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <ng-blah-logo></ng-blah-logo>
        </div>
        <div class="navbar-collapse collapse">
            <ng-blah-login></ng-blah-login>
        </div>
        <!--/.navbar-collapse -->
    </div>
</div>

<ng-blah-marketplace-form></ng-blah-marketplace-form>

JS（我认为是）非常简单：

var ngBlahMarketplaceFormCtrl = function($scope) {
    console.log($scope)

    $scope.form.name = ''
    $scope.form.phone = ''
    $scope.form.firm = ''
    $scope.form.brief = ''


    $scope.submit = function(){
        console.log('ngBlahMarketPlaceFormCtrl::submit()')
        console.log($scope.form)
    }
}

app.directive('ngBlahMarketplaceForm', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , templateUrl: '/resources/ngViews/marketplaceForm.html'
        , controller: 'ngBlahMarketplaceFormCtrl'
    };
});

var ngBlahLoginCtrl = function($scope) {
    console.log($scope)

    $scope.default = {}
    $scope.default.username = 'username' ;
    $scope.default.password = 'password';

    $scope.form = _.clone($scope.default) ;

    $scope.submit = function() {
        console.log('ngBlahLoginCtrl::submit()')
    }
    $scope.help = function() {
        console.log('ngBlahLoginCtrl::help()')
    }
}


// login form and the controller to logic
app.directive('ngBlahLogin', function () {
    return {
        restrict: 'E'
        , transclude: true
        , replace: true
        , controller: 'ngBlahLoginCtrl'
        , templateUrl: '/resources/ngViews/loginThin.html'

    };
});

好的，所以我遇到的问题是只创建了一个范围。当我调查 DOM 时，唯一带有 class="ng-scope" 的元素是 Body 标签。我做了什么来得到这种行为？我是否需要发布更多代码来帮助深入了解这一点？

先感谢您！

编辑：js fiddle： http: //jsfiddle.net/U5UxX/ 在 JS Fiddle 内部，您可以看到两个不同控制器内部控制台的两个日志。两次它都记录范围变量，并且在这两种情况下 scope.id 都是相同的

编辑：澄清问题，即我的两个控制器共享相同的 $scope 变量。页面按预期“呈现”（HTML）。出于某种原因，唯一具有 class="ng-scpoe" 属性的元素是 body 标记（它也包含 ng-app 属性）。

再次感谢

4

1 回答 1

2

这是基于您的代码的工作示例。

添加到指令scope:true

scope:true将创建一个子作用域，该作用域将“原型”从其父作用域继承，因此您将能够访问指令中在父作用域上定义的值。

var fessmodule = angular.module('myModule', ['ui.bootstrap']);

fessmodule.controller('ngMarketplaceFormCtrl', function($scope) {
console.log($scope)

$scope.name = ''
$scope.phone = ''
$scope.firm = ''
$scope.brief = ''


 $scope.submit = function () {
    console.log('ngMarketPlaceFormCtrl::submit()')
    console.log($scope.form)
 }
});

fessmodule.directive('ngMarketplaceForm', function () {
return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: true,
    controller: 'ngMarketplaceFormCtrl',
    template: '<div class="well marketplaceWell">\
                        <div style="margin-left: 15px">\
                            <div class="form-group row">Start a RFP</div>\
                            <div class="form-group row"><input type="text" placeholder="name" class="col-md-9" ng-model="name"/></div>\
                            <div class="form-group row"><input type="text" placeholder="firm" class="col-md-9" ng-model="firm"/></div>\
                            <div class="form-group row"><input type="text" placeholder="phone number" class="col-md-9" ng-model="phone"/></div>\
                            <div class="form-group row"><textarea type="text" placeholder="proposal brief" class="col-md-9" ng-model="brief"></textarea>\
                            </div>\
                            <div class="form-group row">\
                                <button class="btn btn-default" ng-click="submit()">Submit</button>\
                            </div>\
                        </div>\
                    </div>'
   };
});


fessmodule.controller('ngLoginCtrl', function($scope) {
console.log($scope)

$scope.
default = {}
$scope.
default.username = 'username';
$scope.
default.password = 'password';

$scope.form = _.clone($scope.
default);

$scope.submit = function () {
    console.log('ngLoginCtrl::submit()')
}
$scope.help = function () {
    console.log('ngLoginCtrl::help()')
 }
});


// login form and the controller to logic
fessmodule.directive('ngLogin', function () {
return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: true,
    controller: 'ngLoginCtrl',
    template: '<div class="pull-left">\
                        <div class="login-form">\
                            <input type="text" id="username" ng-model="form.username" no-ng-dodilio-smart-default />\
                            <input type="password" id="password" ng-model="form.password" no-ng-dodilio-smart-default />\
                            <button class="btn btn-xs btn-primary" ng-click="submit()">SIGN IN</button>\
                            <button class="btn btn-xs btn-primary" ng-click="help()">?</button>\
                        </div >\
                    </div>'

   };
});

安慰：

a {$id: "003", this: a, $$listeners: Object, $parent: e, $$childTail: null…}
a {$id: "004", this: a, $$listeners: Object, $parent: e, $$childTail: null…}

Fiddle

希望对你有帮助，

于 2013-09-23T21:04:03.553 回答