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

一旦从Select using ng options（使用ng选项选择）中选择了值，此时用户将单击startRecording（开始记录），我想显示从控制器工作的progressbar，但我想在用户单击startRecording（开始记录）时在指令控制器中使用该逻辑，我想将值传递给指令或从指令so调用方法

startRecording

progressbar可以显示

diactive.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>

{{downloadPercentage}}%

如果使用

ng if

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

向指令和调用范围添加一个链接函数。$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();


            });
        }
});

---

希望这对您有所帮助

您只需将该函数的引用传递到包含的范围中即可

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>

angular.module（“App”）.directive（'progressBarCustom'，function（）{
返回{
限制：'E'，
范围：{
消息：“=”，
文件大小：“=”，
fileValue:“=”，
开始记录：“@”//添加了代码
},
templateUrl:“/view/partials/progressbar.html”，
控制器：功能（$scope）{
var data=$scope.message；
$scope.progressBarFlag=false；
//你可以这样称呼它
$scope.startRecording（）；//添加了代码
}
});
挑选
开始录音
可能重复的可能重复，因此我想将
$scope.progressBarFlag
设置为true。一旦启动，我将如何在指令中执行该操作记录invokedscope。$parent（）.progressBarFlag=true；…在链接函数中执行此逻辑。如果选择执行此操作，可以删除控制器函数