javascript - 如何在 Angular Directive(指令)中使用 Controller 对象值？

Question

一旦用户选择值，我就在主页上进行 Angular 选择，我希望在指令中使用这些对象值，例如 $scope.selectedFileSize.value 和 $scope.selectedFileSize.size 所以我可以进一步实现指令中的逻辑。有什么想法吗？

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>

<progress-bar-custom message="event"></progress-bar-custom>

Controller .js

  $scope.onSizeChange = function(){
        $scope.maxMb = $scope.selectedFileSize.size;
        $scope.maxBytes = 3000;
        $scope.max = $scope.maxBytes;
        $scope.FileSizeString = $scope.selectedFileSize.value;
        console.log('FileSize',$scope.maxMb);
    }

指令.js

angular.module("App").directive('progressBarCustom', function() {
            return {
                restrict: 'E',
                scope: {
                    message: "="
                },
                templateUrl: '/view/partials/progressbar.html',
                controller: function($scope) {
                    var data = $scope.message;
                    var currentFileBytes = [];
                    var currentBytesSum;
                    $scope.maxBytes = 3000; // how to get these values from controller 
                    $scope.max = $scope.maxBytes;
                    $scope.FileSizeString = $scope.selectedFileSize.value; //How can i get these values from controller.

                    $scope.random = function(value) {
                        $scope.dynamic = value;
                        $scope.downloadPercentage = parseFloat((value / $scope.maxBytes) * 100).toFixed(0);
                        console.log('current value-dynamic', $scope.dynamic);
                    };

                }
            });

Answer 1

您可以将它们定义为指令范围内的绑定(bind):

scope: {
    message: "=",
    objToBind: "=" // add this one
},

在 HTML 中:

<progress-bar-custom message="event" obj-to-bind="selectedFileSize"></progress-bar-custom>

然后您可以在指令 Controller 中访问它:

$scope.FileSizeString = $scope.objToBind.value

<小时/>

编辑

我猜您想在更改选择时动态更改$scope.FileSizeString，对吗？那么我认为你需要在指令中添加$watch，否则它始终是初始值，并且你不会意识到将来的变化。

我不知道你到底是如何实现你的应用程序的，所以我写了一个简单的演示来演示关键点:

1. 我将您的默认选择选项移至 ng-options 数组中，并使用 ng-init 设置默认选项。
2. 我在指令中使用 $watch 来观察绑定(bind)值的变化。

var app = angular.module('myApp', [])

app.controller('myCtrl', ['$scope', function($scope) {
  $scope.fileSizes = [
    {size: -1, value: 'Select'},
    {size: 1, value: '1MB'},
    {size: 2, value: '2MB'},
    {size: 3, value: '3MB'}
  ]

  $scope.onSizeChange = function() {
    console.log($scope.selected.size)
  }
}])

app.directive('myDirective', function() {
  return {
    restrict: 'E',
    scope: {
      selectedSize: '='
    },
    template: '<div style="font-family:monospace"><p><b>Your choice:</b> {{myChoice}}</p><p><b>Actual Choice:</b> {{selectedSize}}</p></div>',
    controller: function($scope) {
      $scope.myChoice = ''
      $scope.$watch('selectedSize', function (newVal, oldVal) {
        $scope.myChoice = (newVal && newVal.size !== -1) ? newVal.value : ''
      })
    }
  }
})

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <select ng-options="opt as opt.value for opt in fileSizes"
            ng-model="selected"
            ng-init="selected = fileSizes[0]"
            ng-change="onSizeChange()">
    </select>
    <my-directive selected-size="selected"></my-directive>
  </div>
</div>