Question

我正在尝试从组件调用控制器的功能。这是我的文件：

controller.js：

$scope.dataTableDevices = {
    title: 'title',
    color: {'background' : 'rgb(31, 119, 180)'},
    items: [0, 1, 2]
};
$scope.hacerClick = function(){
    alert("it works");
}

view.html：

<device-categories data="dataTableDevices"></device-categories>

deviceCategories.js：

function deviceCategoriesController() {
}

widgetsFactory.component('deviceCategories', {
    templateUrl: 'app/common/js/components/deviceCategories/deviceCategories.html',
    controller: deviceCategoriesController,
    bindings: {
        data: '='
    }
});

deviceCategories.html：

<md-button ng-click="howToCallhacerClick()">
    Click
</md-button>

Answer 1

组件就像具有隔离范围的指令。

如果您希望调用父作用域/控制器作用域中的函数，请执行以下操作

在控制器中考虑以下方法：

angular.module('MyApp').controller('AppController', function ($scope) {
    $scope.validateInputByUser = function (obj) {
        if (obj['note'].length > 255) {
            return false;
            }
            return true;
        };
});

创建组件

angular.module('MyApp')
.component('notes', { 
                        templateUrl: "/Templates/Notes.html", 
                        controllerAs: 'model', 
                        controller: NotesController, 
                        bindings: { 
                            note: '=' 
}});

创建一个名为'NotesController'并带有$ scope注入的控制器，因为组件是控制器的子节点，控制器'scope'可以作为组件中的$ parent访问。

function NotesController ($scope) {
    // binding parent method to scope of current component
    $scope.validateInputByUser = $scope.$parent.validateInputByUser;
};

现在，您可以通过以下方式实现和访问controllers方法：

备注模板上的Html（/Templates/Notes.html）看起来像
```
<textarea type="text" ng-model="model.note" ng-blur="validateInputByUser(model)"/>
```
组件实现页面上的Html看起来像
```
<notes note="obj.notes"/>
```

现在，每次用户输入文本并离开文本区域时，都会调用控制器的函数'validateInputByUser'。

希望这有帮助！干杯...

Answer 2

您需要使用'＆amp;'将功能从控制器传递给组件绑定，用于回调组件事件。所以你需要做这样的事情：

<强>组件

.component('deviceCategories',{
    template: `<div>
                   <md-button ng-click="$ctrl.hacerClickFn()">Click Me!
                   </md-button>
               </div>,
    bindings: {
        data:'=', //assuming you need two way binding
        hacerFunc:'&'
     },
     controller: [function(){
         var ctrl = this;

          ctrl.hacerClickFn = function() {
              ctrl.hacerFunc();
          }
     }]
 });

查看

<device-categories data="data" hacer-func="hacerClick()"</device-categories>

AngularJS Component Documentation

Great explanation of differences between components and directives

从组件调用控制器的功能

2 个答案: