Here is my code
<input
class="form-control"
ng-model="a.newTimes[$index]['time']._dateProxy"
ng-change="updateProviderComment(a)"
bs-timepicker
type="text">
a.newTimes[$index]['time']._dateProxy is a new Date() object
the point is: function updateProviderComment running only first time, when change time
bug? how to fix?
i have found a lot of problem with the angular strap modules, can i suggest you to use the angular-ui module for the timepicker? i have done something similar to your picker in my application with this module and everything is going ok. take a look here
#mautrok yes, i fully agree with you - angular-ui better (maybe only for now). But regarding design in project we have popover with html content and i can't implement this with angular-ui. I try redefine popover template and use ng-include inside, like this:
angular.module("template/popover/popover.html", []).run(["$templateCache", function($templateCache){
$templateCache.put("template/popover/popover.html", ""
+"<div class=\"popover popover-appointment {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">"
+"<div class=\"arrow\"></div>"
+"<div class=\"popover-inner\">"
+"<h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>"
+"<div class=\"popover-content\" ng-controller=\"AppointmentPopoverController\" ng-include src=\"content\"></div>"
+"</div>"
+"</div>"
+"");
}]);
it work, but when popover reopen javascript binding gone
Related
I have an input that's working well with ui bootstrap:
<input type="text"
class="fromDate"
datepicker-popup="MM/dd/yyyy"
ng-model="custom_time_filter_begin"
ng-focus="showFromCalendar = true"
ng-click="showFromCalendar = true"
is-open="showFromCalendar"
show-button-bar="false"
datepicker-template-url="'blah.html'" <-----------------Doesn't work
datepicker-options="datePickerOptions"
ng-required="true"/>
And even this in my controller:
$scope.datePickerOptions =
templateUrl: 'something.html'
showWeeks: false
I'm looking through the docs: http://angular-ui.github.io/bootstrap/#/datepicker. It suggests I do those things, or even set datepickerTemplateUrl in the options or datepicker-template-url in the view, but nothing is changing. It's still using the default template.
I don't want to edit the source. I will however, copy the source into a new file and edit the HTML from there. I can't get it to point to the view file though.
P.S. I'm using coffeescript
Needed to update angular-bootstrap to latest version and then it started complaining. Fixed
Is there anyway to get the value of the angular ui bootstrap typeahead selection before it changes the model?
Thanks alot!
Uri
There is no built in way to do this with with typeahead, but you can just store the old value in your ng-change
<input type="text" ng-model="foo" typeahead="bar in bars" ng-change="storeLast()">
$scope.storeLast() = function(){
//Before you reassign oldFoo, you can do some work with it here.
oldFoo=foo
}
However, this feels like a very strange thing to do. I think the better answer would be to redesign what you are trying to do so that you don't need weird code to do it.
I'm using twitter bootstrap with a popover and got a AngularJS scoped variable to appear correctly. The below works.
(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")
When I add the following
(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")
No errors show up, but all of the {{}} no longer render.
So I tried this as a test of sorts
(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")
Much like the last example, I see the "test" but not the {{item}}. And the "test" only show s up once, even though the notifications had three elements. When I look at the DOM there's this
<div class="popover-content">
<div ng-repeat="item in notifications">you <br><hr></div>
</div>
I've also tried just creating a directive to iterate through the array and make the output I want, but my attempt to set data-content equal to a directive have been failures. The examples I've found elsewhere I'm confident would work, but I just wanted to confirm before I begin implementing something like this (http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service) or (Html file as content in Bootstrap popover in AngularJS directive) that I'm not missing a straightforward fix to the problem I outlined above that would not require me creating a directive.
Edit:
Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview
html might be breaking it, try marking it as trusted html using $sce
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
<button ... data-content="trustedHtml" ...> </button>
I would think this is fairly straight forward, but if I try to include a bound {{data}} model as a parameter in ng-click, nothing happens (an no error is fired in Console).
For example, I have the following:
<p ng-repeat='item in array'>
<a ng-click='function({{item}})'></a>
</p>
Here is a plunker that is more fleshed out: plunker
If I click on the link, nothing happens. Ideas?
Found my own answer:
within ng-click, there is no need for the {{notation}}. It knows that "item" is an angular data model. Again, not super clear in the Angular documentation.
Here is the updated plunker that shows it working and not working.
Here is my plnkr: http://plnkr.co/edit/n8cRXwIpHJw3jUpL8PX5?p=preview You have to click on a li element and the form will appear. Enter a random string and hit 'add notice'. Instead of the textarea text you will get undefined.
Markup:
<ul>
<li ng-repeat="ticket in tickets" ng-click="select(ticket)">
{{ ticket.text }}
</li>
</ul>
<div ui-if="selectedTicket != null">
<form ng-submit="createNotice(selectedTicket)">
<textarea ng-model="noticeText"></textarea>
<button type="submit">add notice</button>
</form>
</div>
JS part:
$scope.createNotice = function(ticket){
alert($scope.noticeText);
}
returns 'undefined'. I noticed that this does not work when using ui-if of angular-ui. Any ideas why this does not work? How to fix it?
Your problem lies in the ui-if part. Angular-ui creates a new scope for anything within that directive so in order to access the parent scope, you must do something like this:
<textarea ng-model="$parent.noticeText"></textarea>
Instead of
<textarea ng-model="noticeText"></textarea>
This issue happened to me while not using the ng-if directive on elements surrounding the textarea element. While the solution of Mathew is correct, the reason seems to be another. Searching for that issue points to this post, so I decided to share this.
If you look at the AngularJS documentation here https://docs.angularjs.org/api/ng/directive/textarea , you can see that Angular adds its own directive called <textarea> that "overrides" the default HTML textarea element. This is the new scope that causes the whole mess.
If you have a variable like
$scope.myText = 'Dummy text';
in your controller and bind that to the textarea element like this
<textarea ng-model="myText"></textarea>
AngularJS will look for that variable in the scope of the directive. It is not there and thus he walks down to $parent. The variable is present there and the text is inserted into the textarea. When changing the text in the textarea, Angular does NOT change the parent's variable. Instead it creates a new variable in the directive's scope and thus the original variable is not updated. If you bind the textarea to the parent's variable, as suggested by Mathew, Angular will always bind to the correct variable and the issue is gone.
<textarea ng-model="$parent.myText"></textarea>
Hope this will clear things up for other people coming to this question and and think "WTF, I am not using ng-if or any other directive in my case!" like I did when I first landed here ;)
Update: Use controller-as syntax
Wanted to add this long before but didn't find time to do it. This is the modern style of building controllers and should be used instead of the $parent stuff above. Read on to find out how and why.
Since AngularJS 1.2 there is the ability to reference the controller object directly instead of using the $scope object. This may be achieved by using this syntax in HTML markup:
<div ng-controller="MyController as myc"> [...] </div>
Popular routing modules (i.e. UI Router) provide similar properties for their states. For UI Router you use the following in your state definition:
[...]
controller: "MyController",
controllerAs: "myc",
[...]
This helps us to circumvent the problem with nested or incorrectly addressed scopes. The above example would be constructed this way. First the JavaScript part. Straight forward, you simple do not use the $scope reference to set your text, just use this to attach the property directly to the controller object.
angular.module('myApp').controller('MyController', function () {
this.myText = 'Dummy text';
});
The markup for the textarea with controller-as syntax would look like this:
<textarea ng-model="myc.myText"></textarea>
This is the most efficient way to do things like this today, because it solves the problem with nested scopes making us count how many layers deep we are at a certain point. Using multiple nested directives inside elements with an ng-controller directive could have lead to something like this when using the old way of referencing scopes. And no one really wants to do that all day!
<textarea ng-model="$parent.$parent.$parent.$parent.myText"></textarea>
Bind the textarea to a scope variable's property rather than directly to a scope variable:
controller:
$scope.notice = {text: ""}
template:
<textarea ng-model="notice.text"></textarea>
It is, indeed, ui-if that creates the problem. Angular if directives destroy and recreate portions of the dom tree based on the expression. This is was creates the new scope and not the textarea directive as marandus suggested.
Here's a post on the differences between ngIf and ngShow that describes this well—what is the difference between ng-if and ng-show/ng-hide.