Angularjs指令复选框与ng模型

我有一个指令，工作复选框，也有ng模型。
在关于链接功能的指令中，复选框未获取模型的值。
这是工作，如果添加超时（无论多久，即使为0）。Angularjs指令复选框与ng模型

我的控制和指令：

var myApp = angular.module("myApp",[]) 
.directive("checkBox", function($timeout){ 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs, ctrl) { 
      console.log("Check box is : " + element[0].checked); 
      scope.message += "Check box is : " + element[0].checked + " , "; 
      $timeout(function(){ 
       scope.message += "Check box is : " + element[0].checked;  
       console.log("Check box is : " + element[0].checked); 
      },0); 
     } 
    } 
}); 

function myCtrl($scope){ 
    $scope.checkBoxModel = true; 
    $scope.message = ""; 
}

HTML：

<div ng-app="myApp" ng-controller="myCtrl" > 
    <input type="checkbox" ng-model="checkBoxModel" check-box> 
     <br/> 
     {{message}} 
</div>

Fiddel - http://jsfiddle.net/myyjL/

在此先感谢。

来源

2013-12-22 user3126871

-1

你可能不应该做你想做的事情，但它是可能的。

这里是，工作不超时plunkr：

http://jsfiddle.net/myyjL/2/

.directive("checkBox", ['$timeout', function($timeout){ 
    return { 
     restrict: 'A', 
     replace: false, 
     scope: { 
      ngModel:'=' 
     }, 
     transclude: true, 
     link: function (scope, element, attrs, ctrl) { 
      scope.$watch('ngModel', function(newValue){ 
       scope.$parent.message = 'Checkbox value is: ' + newValue; 
      }); 
     } 
    } 
}])

这种做法的问题是，你的指令，知道的东西，是外面的它（如{{消息}}变量）。这是一个糟糕的设计，你应该重做。另外，在你的小提琴中，你可以使用元素[0] .checked，而你可以很容易地使用ng-modal值。但是ng-modal可能不在那里。另外，输入可能不是一个真正的复选框，所以你的方法也失败了。如何解决这个问题？我会写你一个示范plunkr在秒：

http://plnkr.co/edit/jyY6sQwXmtlGOvpdzETR?p=preview

angular.module('myApp', []) 

.directive('box', [function(){ 
    return { 
     restrict: 'E', 
     scope: { 
      ngModel: '=' 
     }, 
     templateUrl: 'box.tpl.html', 
     replace: true 
    }; 
}]) 

.controller('MyController', ['$scope', function MyController($scope){ 
    $scope.checkboxValue = true; 
}]);

我们在这里做的是确保我们的指令总是通过提供模板中的复选框的复选框。你可以做你的指示样式等。

来源

2013-12-22 10:47:34

嗨巴巴。感谢您的回答。我知道使用指令之外的东西并不是很好的设计。我只是为了在屏幕上显示假/真的示例而添加了这个... 关于手表 - 我不想每次模型改变时都做一些事情。只在指令加载时，我需要知道该复选框是否被选中。 – user3126871

还有其他可以使用的指令：ng-load和ng-init。你不应该使用$超时。 –

当然我不想使用$超时。那为什么我问这个问题。了解方式之后零这个复选框获取值..如果我使用ng-load或ng-init我想念指令点..我不想为每个复选框添加ng-init。 – user3126871

Angularjs指令复选框与ng模型

回答

相关问题