将角度控制器应用于模板

Apply Angular Controller to a Template

本文关键字：应用于 控制器      更新时间：2023-09-26

所以，我不确定我在问什么，但我想实现这一点：

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>

主页/Dashboard.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'
    };
  });

当指令需要一个控制器时，它会将该控制器作为其链接功能。

.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时，请使用控制器。否则请使用链接。

您可以将控制器分配给指令：

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

所以我只想在这里澄清一些事情。

/MyComponent/Component.html:

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

/mycomponent.direction.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'
    };
  });

并将index.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>

这也产生了所需的输出，只需要较少的代码行。

所以我只是希望这能更好地向人们阐明指令。为了完整性和实现这一点所采取的步骤，我把它放在上面。显然，我从其他答案中得到了一些帮助，这些答案为我指明了正确的方向。

相关文章：