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模型

回答

相關問題