如何在自定义指令中使用控制器方法？

Question

一旦使用 ng-options 从 Select 中选择值，用户将在那时单击 startRecording 我想显示从控制器工作的进度条，但我想在用户单击时在指令控制器中使用该逻辑在 startRecording 上，我想将值传递给指令或从指令调用方法 startRecording，以便进度条可以显示。

diective.js

angular.module("App").directive('progressBarCustom',function () {
    return {
        restrict: 'E',
        scope:{
            message: "=",
            fileSize: "=",
            fileValue: "="
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: function ($scope) {
            var data = $scope.message;
            $scope.progressBarFlag = false;
    }
});

ctrl.js

$scope.startRecording = function () {
        $scope.progressBarFlag = true;
    }

main.html

<div class="col-md-3">
    <select class="form-control" ng-model="selectedFileSize" ng-options="item as item.value for item in FileSizeOptions" ng-change="onSizeChange()"><option value="">Select</option></select>
</div>
<div class="col-md-2">
    <button type="button" class="btn btn-primary" ng-click="startRecording()">Start Recording</button>
</div>


<progress-bar-custom message="event" fileSize="selectedFileSize.size" fileValue="selectedFileSize.value"></progress-bar-custom>

progressbar.html

<uib-progressbar ng-show="progressBarFlag" type="success" class="progress-striped" max="max" animate="true" value="dynamic"><span>{{downloadPercentage}}%</span></uib-progressbar>

Answer 1

使用 ng-if 根据需要显示和隐藏进度条怎么样？如果您所做的只是按需显示和隐藏元素，那么在实际指令中添加传递函数似乎是不必要的。

Answer 2

在你的指令中添加一个link函数并调用scope.$parent()来访问包含进度条方法的控制器。

示例：

angular.module("App").directive('progressBarCustom',function () {
    return {
        restrict: 'E',
        scope:{
            message: "=",
            fileSize: "=",
            fileValue: "="
        },
        templateUrl: '/view/partials/progressbar.html',
        controller: function ($scope) {
            var data = $scope.message;
            $scope.progressBarFlag = false;
    },

    link: function(scope, el, attrs) {

            el.bind('click', function(event) {
                scope.$parent.startRecording();


            });
        }
});

希望对您有所帮助

Answer 3

您只需将该函数的引用传递到包含的范围内。

angular.module("App").directive('progressBarCustom',function () {
return {
    restrict: 'E',
    scope:{
        message: "=",
        fileSize: "=",
        fileValue: "=", 
        startRecording: "@" //Added code
    },
    templateUrl: '/view/partials/progressbar.html',
    controller: function ($scope) {
        var data = $scope.message;
        $scope.progressBarFlag = false;
        //You can call it like so
        $scope.startRecording(); //Added code
    }
});

<div class="col-md-3">
    <select class="form-control"
          ng-model="selectedFileSize"
          ng-options="item as item.value for item in FileSizeOptions"
          ng-change="onSizeChange()">
          <option value="">Select</option>
      </select>
</div>
<div class="col-md-2">
        <button type="button"
               class="btn btn-primary"
               ng-click="startRecording()">
            Start Recording
        </button>
</div>
<!-- Pass in the function here -->
<progress-bar-custom
    message="event"
    fileSize="selectedFileSize.size"
    fileValue="selectedFileSize.value"
    start-recording="startRecording()"<!-- Added code --> >
</progress-bar-custom>

从最佳实践的角度来看，我还建议研究并采用“controller as”语法，因为这会产生更好组织和更易读的代码。

如何在自定义指令中使用控制器方法？

How to use controller method in custom directive?

javascript

angularjs

angular-directive