I have a button whose text is a binding expression.
It has a ng-click directive which is a function to change the value of the expression.
However, it doesn't work.
What's wrong here?
Here is my plunk: http://plnkr.co/edit/EScqj0iczpH65tstokia
HTML
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<button ng-click="start()"> {{ myText }} </button>
</body>
JS
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function () {
$scope.myText = 'Starting...';
}
});
I think you got a little confused. In your script.js, you didn't define a start() function, but you called one in your ng-click directive. Instead, you created a starting() function.
This should work:
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function () {
$scope.myText = 'Starting...';
}
});
Related
I'm trying to trigger a click on a link, but it only runs the ng-click
From MyScript.js:
$timeout(function () {
angular.element(document.querySelector('#cancelButton')).triggerHandler('click');
}, 0);
And from Index.cshtml:
<input class="popupButton" type="button" value="Anuluj" />
I know that the way I did with
<a...><input... /></a>
is wrong,
but the important thing is: how to it to click the link and the ng-click?
I have written a simple program to navigate to the link.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="app">
<div ng-controller="ctrl">
Redirect to Click Me!
</div>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope, $log, $window) {
$scope.redirect = function () {
var url = "http://www.google.com";
$window.location.href = url;
};
});
</script>
</body>
</html>
Is this what you wanted?
See example below and the TODO in the send function : How can I assign the label value in the global send function to dropboxController dropbox.label
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
window.onload=function() {
$('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = "hello angular";
});
angular.bootstrap($('#AddIn'), ['dropboxApp']);
}
function send(label)
{
//TODO assign label value to dropboxController dropbox.label
}
</script>
</head>
<body>
<div id="AddIn"></div>
<button onclick="send('new label');">Send</button>
</body>
</html>
Use angular.element and get scope of specific dom element and apply label to it.
Change dropbox.label to $scope.label and inject $scope in controller because this and $scope are different. Check 'this' vs $scope in AngularJS controllers
Keep in Mind: Here I have used myDiv which has scope for angular and added id in append div line.
It's better to use ng-click instead of onclick if possible.
window.onload = function() {
$('#AddIn').append("<div id='myDiv' ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{label}}</div>");
angular.module('dropboxApp', [])
.controller('dropboxController', function($scope) {
var dropbox = this;
$scope.label = "hello angular";
});
angular.bootstrap($('#AddIn'), ['dropboxApp']);
}
function send(label) {
var scope = angular.element($("#myDiv")).scope();
scope.$apply(function() {
scope.label = label;
})
console.log(scope.label);
}
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="AddIn"></div>
<button id="myButton" onclick="send('new label');">Send</button>
</body>
</html>
I have this button with data="test" when I mouseover the button I want to show the word test in {{Detail}} when I mouse out from the button {{Detail}} should show nothing.
</head>
<body ng-app="">
<button ng-mouseover="Detail = data" data="test" >MouseOver Me</button>
Details: {{Detail}}
</body>
</html>
<button ng-mouseover="Detail = data" ng-mouseleave="Detail=''" ng-init="data='test'" >
i think this code is useful for you
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.data="test"
$scope.hoverIn = function () {
this.hoverEdit = true;
};
$scope.hoverOut = function () {
this.hoverEdit = false;
};
})
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl" >
<button ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" title="{{data}}">MouseOver Me</button>
Details: <span ng-show="hoverEdit">{{data}}</span>
</body>
</html>
I am newbie to Angular and web development, I have a text input area that needs to be selected (highlighted) when a button is clicked in Angular.
do I need to something like angular.element(document.getElelmentById(txt1)) and do select on it?
Similar to this thread:
Selecting all text in HTML text input when clicked , the question is, is there a rightway/better way to do this in Angular?
I have searched for an answer, closest I could get was this thread: How to set focus on input field? but couldn't successfully convert the suggestions for select().
Here is my jsfiddle in plain js: http://jsfiddle.net/x62ye14y/, a translation to angular would be greatly appreciated.
<!DOCTYPE html>
<html>
<body>
Select your favorite fruit:
<input type="text" id="id123" placeholder="ENTER VALUE">
<p>Click the button to select text in the textbox</p>
<button onclick="myFunction()">Select Txt</button>
<script>
function myFunction() {
document.getElementById("id123").select();
}
</script>
</body>
</html>
Here is the code I have so far,:
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" id="txt1"/>
<button ng-click="selectOnClick()">Select Txt</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js">
</script>
<script type="text/javascript">
var mod1 = angular.module('demo', []);
mod1.controller('DemoCtrl', function ($scope) {
$scope.content = 'some text';
});
mod1.directive('selectOnClick', function () {
// Linker function
var element1 = angular.element("txt1");
element1.select();
});
</script>
</body>
</html>
http://plnkr.co/edit/DKxAs4QfkLzwAYPxx7tW?p=preview
Simple way to do is using click event.
for example
<input type = "text" (click) = "$event.target.select()">
Can you try this:
http://plnkr.co/edit/PzcINVKw6KNBFxlZUgAS?p=preview
<!DOCTYPE html>
<html ng-app="demo">
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
</head>
<body>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="content" select-on-click />
<p>Content: {{content}}</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app:
(function (angular) {
var module = angular.module('demo', []);
module.controller('DemoCtrl', function ($scope) {
$scope.content = 'foobar';
});
module.directive('selectOnClick', function () {
// Linker function
return function (scope, element, attrs) {
element.bind('click', function () {
this.select();
});
};
});
}(angular));
you just need to move the select-on-click to a button
I have written a simple sample custom angular directive and added the directive twice in the HTML.
Below is the sample.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script>
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('rkitem', function () {
return {
restrict: 'E',
template: '<h4> template text </h4>'
}
});
var myApp = angular.module('myApp', ['myDirectives']);
var ctrl = function ($scope) {
$scope.fname = 'test';
}
myApp.controller('ctrl', ctrl);
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="ctrl">
<div class="row">
<rkitem />
<rkitem />
</div>
</div>
</body>
</html>
Expected Output : template text should be displayed twice as rkitem element mentioned twice in HTML
Acutal Output : template text is getting displayed only once
Can anyone please explain why it is getting displayed only once and not twice.
You should add closing tags to your directive elements:
<div class="row">
<rkitem></rkitem>
<rkitem></rkitem>
</div>