通過指令附加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

希望它會幫助你，