javascript - 在我的情况下如何从指令中获取值

我试图在Angular中为我的应用创建指令，并且需要将值传递给控制器

我有类似的东西

controllers.directive('checkBox', function() {
    return {
        restrict: 'E',
        scope: {
            checkAll: '=',
        },
        template: '<input check-all="checkAll" type="checkbox" ng-model="check"/>',
        replace: true,
        link: function(scope) {
            scope.$watch('checkAll', function(newVal){
                scope.check = newVal;
            })
        }
    }
})

app.controller('test', function(){
    $scope.submit=function(){
    //not sure how to get the checkbox value as $scope.check is undefined....
    }
})

html

<div ng-controller="test">
 <div class="checkbox" ng-repeat="item in items">
      <check-box></check-box>{{item.name}}
 </div>
  <button type="button" ng-click="submit()">submit</button
</div>

最佳答案

您正在将=用于checkAll进行双向绑定。

scope: {
    checkAll: '=',
}

这就是您这样做的方式。基本上，您的指令将具有一个check-all属性，无论您从控制器的视图传递给它的什么$scope变量，您都可以在指令中修改该变量，并且该值将反映回控制器中。

例如，假设您的控制器具有一个名为testValue的范围变量。然后您可以像这样在标记中使用它：

<div class="checkbox" ng-repeat="item in items">
    <check-box check-all="testValue"></check-box>{{item.name}}
</div>

现在，该指令对指令的链接功能中的checkAll所做的任何操作都将反映在控制器的$scope.testValue中。

因此，如果您希望控制器中的其他变量获得不同的值，只需为指令添加另一个属性（如checkAll），它就可以完成此工作。

希望能有所帮助。

更新：

我正确阅读了您的代码，我想我知道您需要什么。让我尝试为您做准备。

controllers.directive('checkBox', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            checkAll: '='
        },
        template: '<input check-all="checkAll" type="checkbox" ng-model="ngModel"/>',
        replace: true,
        link: function(scope) {
            scope.$watch('checkAll', function(newVal){
                scope.check = newVal;
            })
        }
    }
})

app.controller('test', function(){
    $scope.submit=function(){
      console.log($scope.checkboxVariable);
      // or use $http service to send the value
    }
})

的HTML

<div ng-controller="test">
  <div class="checkbox" ng-repeat="item in items">
    <check-box ng-model="checkboxVariable"></check-box>{{item.name}}
  </div>
  <button type="button" ng-click="submit()">submit</button
</div>

让我解释一下。

我认为您想要的是将您的指令替换为复选框输入元素。并且当检查时，则必须设置范围中的某些内容。除非允许在控制器的作用域上设置值，否则该指令不能设置任何内容。这可以通过使用=设置使用双重绑定来实现。因此，我们定义了一个带有双重绑定的名为ngModel的新范围属性。在标记中，我们将其传递给名为check的范围变量。现在，当选中/取消选中输入复选框时，指令的作用域将在其自身作用域的ngModel变量上获取其值。由于ngModel具有双重绑定，因此它会反映在控制器的check变量中。

希望这可以帮助。

关于javascript - 在我的情况下如何从指令中获取值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24540757/