應用角度控制器的模板

Question

所以，我不知道它是什麼，我問，但我想做到這一點：

的Index.html：

<div ng-view> 

</div> 
<script> 
    angular.module('myApp', ['ngRoute']) 
    .config(['$routeProvider', function ($routeProvider) { 
     $routeProvider.when('/', { controller: "HomeController", templateUrl: '/Partials/Home/Dashboard.html' }); 

     $routeProvider.otherwise({ redirectTo: '/' }); 
    }]); 
</script> 

首頁/儀表板。 HTML：

<h2 class="page-header">{{welcome}}</h2> 

<!-- Insert my reusable component here --> 

我可重用的組件將駐留在MyComponent/Component.html，並有與之相關的控制器myApp.component.controller。

因此，我想將可重新創建的組件放入頁面並將其綁定到我的控制器。所以我得到儘可能這樣：

.directive('MyComponent', function() { 
    return { 
     restrict: 'E', 
     scope: { 

     }, 
     templateUrl: '/MyComponent/Component.html' 
    }; 
    }); 

那麼我現在如何綁定我的控制器呢？難道我這樣做：

.directive('MyComponent', function() { 
    return { 
     restrict: 'E', 
     resolve: function() { 
     return /* resolve myApp.component.controller */; 
     }, 
     templateUrl: '/MyComponent/Component.html' 
    }; 
    }); 

Answer 1

所以我只想在這裏澄清幾件事。

/MyComponent/Component.html：

<h2>{{welcome}}</h2> 

/mycomponent.directive.js：

.directive('MyComponent', function() { 
    return { 
     restrict: 'E', 
     controller : 'ComponentController', 
     templateUrl: '/MyComponent/Component.html' 
    }; 
    }); 

以上結合這樣在的index.html：

<h2>{{welcome}}</h2> <!-- this is from ng-controller = HomeController --> 

<my-component></my-component> <!-- this is scoping from ng-controller = ComponentController --> 

這產生的結果

<h2>Hello from MyComponent</h2> 
<h2>Hello from MyComponent</h2> 

看來，ComponentController已接管整個範圍。然後我改變了這個指令：

.directive('MyComponent', function() { 
    return { 
     restrict: 'E', 
     // controller : 'ComponentController', 
     templateUrl: '/MyComponent/Component.html' 
    }; 
    }); 

並且改變了的索引。HTML這樣：

<h2>{{welcome}}</h2> <!-- this is from ng-controller = HomeController --> 

<div ng-controller="ComponentController"> 
    <my-component></my-component> <!-- this is scoping from ng-controller = ComponentController --> 
</div> 

這給正確的輸出：

<h2>Welcome from HomeController</h2> 
<h2>Welcome from ComponentController</h2> 

然後，我又變的指令是：

.directive('MyComponent', function() { 
    return { 
     restrict: 'A', // <----- note this small change, restrict to attributes 
     // controller : 'ComponentController', 
     templateUrl: '/MyComponent/Component.html' 
    }; 
    }); 

我改變的index.html這個：

<h2>{{welcome}}</h2> 
<div ng-controller="ComponentController" my-component></div> 

這也產生了所需的輸出，只需少量代碼。

所以我只是希望這個更好地澄清指令給人們。爲了完整性和我爲實現這一目標所採取的步驟，我將這一點付諸實施。很明顯，我從其他答案中得到了一些幫助，這些答案指出了我的正確方向。

Answer 2

您可以將控制器的指令：

.directive('MyComponent', function() { 
    return { 
     restrict: 'E', 
     controller : 'HomeController', 
     templateUrl: '/MyComponent/Component.html' 
    }; 
    }); 

Answer 3

當一個指令需要一個控制器，它接收控制器作爲其 鏈接功能的第四個參數。

.directive('MyComponent', function() { 
    return { 
     restrict: 'E', 
     controller: 'MyController', // attach it. 
     require: ['MyController','^ngModel'], // required in link function 
     templateUrl: '/MyComponent/Component.html', 
     link: function(scope, element, attrs, controllers) { 
     var MyController = controllers[0]; 
     var ngModelCtlr = controllers[1]; 
     ///... 
     } 
    }; 
    }); 

^前綴表示該指令在其父母上搜索控制器（不帶^前綴，該指令僅在其自己的元素上查找控制器）。

最佳實踐：當您想將API暴露給其他指令時使用控制器。否則使用鏈接。