I am having trouble using $document in the modals controller. Is there a correct way of passing it in? I cant use just document as our angular project rules do not allow it
Calling the modal
var modalInstance = $uibModal.open({
templateUrl: "errorsModal.html",
controller: ["$uibModalInstance", "data","vm", modalController],
controllerAs: "vm",
size:"md",
resolve: {
data: function () {
return referenceDataService.getErrors().$loaded();
},
vm: function (){
return vm;
}
}
});
}
Modals Function I am trying to use $document in
function isTrueOrFalse(elementId,tickBoxElement,newData){
console.log(vm.check);
var checkBox = $document.getElementById(tickBoxElement);
checkBox.checked = !checkBox.checked;
updateErrors(newData,parentVm,true);
if(checkBox.checked === true){
checkBox.checked = false;
updateErrors(newData,parentVm,true);
}
else if(checkBox.checked ===false){
checkBox.checked = true;
updateErrors(newData,parentVm,false);
}
else{
checkBox.checked = true;
}
}
I have found my own workaround using angular.element("elementId")
Related
var app = angular.module('myApp', []);
app.controller('checkCtrl', ['$scope','sharedService', function($scope, sharedService) {
$scope.isCutScore = function() {
if($scope.cc) {
alert('Checked');
$scope.val = true;
} else {
alert('Unchecked');
}
};
}]);
app.controller('divCtrl', ['$scope', 'sharedService', function($scope, sharedService) {
$scope.addClass = function() {
if(flag == true) {
return EL;
} else {
return EP;
}
};
}]);
app.service('sharedService', function() {
var flag = false;
if(angular.element('#cutScoreCheck').is(':checked')) {
flag = true;
} else {
flag = false;
}
});
Add and remove class to a div using ng-class on click of checkbox. But challenge is checkbox and div to which we need to apply and remove class are in different controllers. And compulsion here is to use a service which is shared by both the controllers.
In the following example if we check the checkbox, 'EL' class should be applied and if we uncheck the box, this class will be removed and 'EP' should be applied.
Code
you can use this. Works here.
I have added function to service, it will be called when user check the checkbox and I used $rootScope to reach AddClass method in different controller.
your body html
<body ng-app="myApp">
<div class="row">
<div class="col-sm-4 checkDiv" ng-controller="checkCtrl">
<input type="checkbox" id="cutScoreCheck" ng-model="cc" ng-change="checkDiv()"/>
</div>
</div>
<div class="row">
<div class="col-sm-4 container" ng-controller="divCtrl" ng-class="flag ? 'EL' : 'EP'">500</div>
</div>
<script src="CtrlCheck.js"></script>
</body>
Js part:
var app = angular.module('myApp', []);
app.controller('checkCtrl', ['$scope','sharedService', '$rootScope',function($scope, sharedService,$rootScope) {
$scope.checkDiv = function(){
var flag = sharedService.CheckDiv($scope.cc);
$rootScope.addClass(flag);
}
}]);
app.controller('divCtrl', ['$scope', 'sharedService', '$rootScope',function($scope, sharedService,$rootScope,$apply) {
$scope.flag = false;
$rootScope.addClass = function(flag) {
if(flag == 'true') {
$scope.divClass = "EL";
} else {
$scope.divClass = "EP";
}
console.log(flag)
$scope.flag = flag;
};
}]);
app.service('sharedService', function() {
var flag = false;
this.CheckDiv = function (isChecked) {
if(isChecked) {
flag = true;
} else {
flag = false;
}
return flag;
}
});
within my angularJS app I want to check a radiobox once the route loads. Using $scope.$on('$routeChangeSuccess', function() { I am having no such luck. The alerts all load using routeChangeSuccess but the checking of the radioboxes do not.
As a test I have create a button that when I click on it it runs testByClickingThis() via ng-click. This runs the same code and works, sending the alert and checking the boxes.
What is the difference and why? And how can I make the radiobox be pre-selected on route load?
The controller code is included here:
publicapp.controller('LCLoggedinController', function($scope, $route, patientAnswers) {
$scope.language='';
$scope.back = '#/';
$scope.home = '#/lcloggedin';
$scope.next = '#/lcloggedin';
$scope.objectValue = patientAnswers.getObject();
$scope.$on('$routeChangeSuccess', function() {
if($scope.objectValue.language=="english"){
alert('a');
document.getElementById("englishBox").checked = true;
}else if($scope.objectValue.language=="italian"){
alert('b');
document.getElementById("italianBox").checked = true;
}else{
$scope.language='#/lcloggedin';
alert('c');
}
});
$scope.testByClickingThis = function () {
if($scope.objectValue.language=="english"){
alert('a');
document.getElementById("englishBox").checked = true;
}else if($scope.objectValue.language=="italian"){
alert('b');
document.getElementById("italianBox").checked = true;
}else{
$scope.language='#/lcloggedin';
alert('c');
}
}
});
Here's a plunkr with my problem: http://plnkr.co/edit/Sx830ekQyP7YBqmRB4Nd?p=preview
Click "Open", then click on "5". Notice how it changes to "test"? Now, type something into Body. It'll either say "Say a little more..." or "Now for the title". Either way, click the button again, and notice how it doesn't change to "test"? Why not? If I remove the directive, the button changes to "test" with or without text in the body.
I know this has to do with the scope in the directive, but I don't understand what exactly is wrong. Can you explain? Thanks.
angular.module('plunker', ['ngDialog']).controller('MainCtrl', function($scope, ngDialog) {
//$scope.submitPostValue = "OK";
$scope.submitPost = function() {
$scope.submitPostValue = 'test';
};
$scope.open = function () {
console.log('open');
$scope.submitPostValue = '5';
ngDialog.openConfirm({
template: 'postModal',
showClose: true,
trapFocus: false,
scope: $scope,
}).then(function (success) {
}, function (error) {
});
};
}).directive('bodyValidator', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ctrl) {
function customValidator(ngModelValue) {
if(ngModelValue.length > 0){
if(ngModelValue.length < 10) {
scope.submitPostValue = "Say a little more...";
scope.bodyValid = false;
}
else {
scope.bodyValid = true;
if(scope.titleValid)
scope.submitPostValue = "Submit";
else
scope.submitPostValue = "Now for the title..."
}
}
else {
scope.submitPostValue = "Enter a body...";
scope.bodyValid = false;
}
return ngModelValue;
}
ctrl.$parsers.push(customValidator);
}
};
});
Try to wrap all your variables into an object.
Define $scope.obj = {}; first and change all your scope.submitPostValue to $scope.obj.submitPostValue. In your HTML, change ng-value='submitPostValue' to ng-value=obj.submitPostValue.
My 2 way bidning doesn't work, it works if i call the vm.Play() function directly but when it gets called from the video play event then it doesn't work. Does anyone know why?
function VideoEventStats() {
var directive = {
restrict: "A",
replace: false,
scope: {
videoEventStats: "="
},
controller: controllerFunction,
controllerAs: "vm",
bindToController: true
};
controllerFunction.$inject = ["$element"];
function controllerFunction($element) {
var vm = this;
vm.Play = Play;
if($element.context.tagName === "VIDEO") {
angular.element($element).on('play', vm.Play);
$element.context.onended = function() {
console.log('ended..');
};
}
else {
console.warn('This element is not a video element');
}
function Play() {
vm.videoEventStats.CurrentUserHasSeen = true;
}
}
return directive;
}
Add the vm.videoEventStats.CurrentUserHasSeen = true; inside of a $timeout made the trick...
function Play() { $timeout(function() { vm.videoEventStats.CurrentUserHasSeen = true; }, 0); }
My directive has
link: function ($scope, $elm, $attrs) {
var status = $scope.item.status
if (status) {
var statusName = status.name,
item = $scope.item;
if (statusName === 'USED') {
$attrs.$set('ng-disabled', true); // this doesn't work
} else {
$elm.attr('ng-disabled', false);
}
}
}
So, my question is:
How to apply ng-disabled to element with this directive?
if (statusName === 'USED') {
$attrs.$set('disabled', 'disabled');
} else {
$elm.removeAttr('disabled');
}
Why invoke ng-disable at all? You're already once evaluating the condition yourself, so having ng-disable evaluating it again is redundant.
You would set ng-disabled to a scope variable, ex:
<input ng-disabled="isDisabled" />
And then inside your directive you can set that variable:
$scope.isDisabled = true;
//html
<div ng-app="miniapp" ng-controller="MainCtrl">
<input type="submit" mydir>
</div>
//js
'use strict';
var app = angular.module('miniapp', []);
app.directive('mydir', function ($compile) {
return {
priority:1001, // compiles first
terminal:true, // prevent lower priority directives to compile after it
compile: function(el) {
el.removeAttr('mydir'); // necessary to avoid infinite compile loop
return function(scope){
var status = scope.item.status
if (status === 'USED') {
el.attr('ng-disabled',true);
} else {
el.attr('ng-disabled',false);
}
var fn = $compile(el);
fn(scope);
};
}
};
});
app.controller('MainCtrl', function ($scope) {
$scope.item = {};
$scope.item.status = 'USED';
});
credit to Ilan Frumer