Question

我有一个自定义指令，如下所示：

<div class="col-md-6">
    {{templateMapping[colProp].SheetPointer}}
    <select class="form-control"
        ng-model="selectedColumn"
        ng-change="changeMapping()"
        ng-options="Col.SheetPointer for Col in optionList"></select>
</div>

请注意ng-change。

我的指令代码如下所示：

angular
.module('app.import')
.directive('mappingEdit', ['$rootScope', function ($rootScope) {
    return {
        restrict: "E",
        templateUrl: "partials/templates/MappingEdit.html",
        scope: {
            templateMapping: "=", //parent object
            colProp: "@", //name of property
            optionList: "=",
            colFilter: "=filter"
        },
        link: function (scope) {
            scope.selectedColumn = {};
            scope.changeMapping = function() {
                // ng-change fired here!
                scope.templateMapping[scope.colProp] = scope.selectedColumn;
                // call "autoSave here, commitSave is in the Controller...
            };
        }
    }
}]);

自定义指令的使用方式如下：

<mapping-edit 
    template-mapping="mapping" 
    col-prop="MappedColumn" 
    option-list="columnList" 
    filter="selectedSheet.SheetName" />

正如您所看到的，我的指令html代码是<select>并且有一个ng-change我想在我的控制器中调用一个名为commitSave的函数，它看起来如下所示：

$scope.commitSave = function () {
    alert("on changed!")
}

如何通过ng-change指令调用此控制器功能？

Answer 1

你可以这两种方式。

您可以在范围定义中传递函数，例如：

    scope: {
        templateMapping: "=", //parent object
        colProp: "@", //name of property
        optionList: "=",
        colFilter: "=filter"
        updateFn: "&"
    },

并在标记中：

<mapping-edit 
template-mapping="mapping" 
col-prop="MappedColumn" 
option-list="columnList" 
filter="selectedSheet.SheetName" 
updateFn="commitSave"/>

最后，在你的链接功能中：

scope.changeMapping = function() {
        // ng-change fired here!
        scope.templateMapping[scope.colProp] = scope.selectedColumn;
        scope.updateFn()
    };

使用事件：）

这是一个有角度的文档中的一个plunker，展示。 http://plnkr.co/edit/UTPVE1qeTraJZcWRK1UO?p=info

Answer 2

可以添加另一个属性以将控制器功能传递到指令范围

<mapping-edit 
    template-mapping="mapping" 
    col-prop="MappedColumn" 
    option-list="columnList"
    commit-save ="commitSave" 
    filter="selectedSheet.SheetName" />

JS

angular
.module('app.import')
.directive('mappingEdit', ['$rootScope', function ($rootScope) {
    return {
        restrict: "E",
        templateUrl: "partials/templates/MappingEdit.html",
        scope: {
            templateMapping: "=", //parent object
            colProp: "@", //name of property
            optionList: "=",
            colFilter: "=filter",
            commitSave : '=' // bind to controller function
        },
        link: function (scope) {
            scope.selectedColumn = {};
            scope.changeMapping = function() {
                // ng-change fired here!
                scope.templateMapping[scope.colProp] = scope.selectedColumn;
                // call "autoSave 
                scope.commitSave( /* params */ )

            };
        }
    }
}]);

Answer 3

在名为on-change的指令中添加类似AngularJS的新API：

<mapping-edit 
   template-mapping="mapping" 
   col-prop="MappedColumn" 
   option-list="columnList" 
   on-change="commitSave()"
   filter="selectedSheet.SheetName" />

在changeMapping：

中触发该方法

scope.changeMapping = function() {
   // ng-change fired here!
   scope.templateMapping[scope.colProp] = scope.selectedColumn;
   // trigger on-change hook here!
   $parse(attrs.onChange)(scope);
};

不要忘记注入服务$parse

AngularJS指令与控制器通信以调用on

3 个答案: