通过指令附加angularjs控制器不分配class =“ng-scope”

Question

我是新来角度如此道歉，如果我在这里丢失了一个简单的概念。我用很多指令开发了我的应用程序，以放入我的网站的各个部分。他们有一个模板和一个控制器，我在直接分配控制器。我打算到现场

<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小提琴：http://jsfiddle.net/U5UxX/ JS小提琴里面可以看到两个日志到两个不同的控制器内的控制台。两次它都记录范围变量，并且在两种情况下scope.id都是一样的

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

再次感谢

Answer 1

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

加入指令scope:true

scope:true将创建一个子范围，将“prototypically”继承其父，这样你就可以访问你的指令，对父母的范围定义的值。

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

希望它会帮助你，