应用角度控制器的模板

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暴露给其他指令时使用控制器。否则使用链接。