Question

一旦从选择使用ng-options选择了值，用户将点击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

将链接函数添加到您的指令并调用范围。$ 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 2

如何使用constexpr int graph_index = std::ios_base::xalloc(); // there is no "xdealloc()" enter code here std::istream& operator>> (std::istream& in, Graph& graph) { in.pword(graph_index) = &graph; // ... Edge e; in >> e; // ... } std::istream& operator>> (std::istream& in, Edge& edge) { Graph* g = static_cast<Graph*>(in.pword(graph_index); // use g to obtain the relevant context and the edges }显示和隐藏进度条呢？如果你所做的只是按需显示和隐藏元素，那么在实际指令中添加传递函数似乎是不必要的。

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>

从最佳实践的角度来看，我也建议调查并采用＆＃34;控制器为＆＃34;语法因为这会导致更好的组织和更易读的代码。

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

3 个答案: