Hi all..
referring to ngRoute,
i created a single page application but would like to apply different css rules to each sub-page like background image
how can i do that?
i assigned a different controller to each sub-page
and in the link tag i used ng-href and {{name}}.css to tell the browser to grap the correct css file where is name is giving the value of the file name and attached to the scope inside the corresponding controller.
is there a need to use more than one ng-controller ?
here is the view : http://shireefkhatab.github.io/imax-design
and my code : https://github.com/shireefkhatab/imax-design
hope to get a response
thank you all in advance.
Reefo.
You can include those styles in your template (views) or make separate route for styles, add its view in head section and then change state from your controller using $state.go('where.ever.you.want.to.go');
Related
How to find and replace a specific text on a html page using AngularJs
That text is on a third party component so the id and the class is keeping changing. What I can reference is the text itself that I want to change.
That specific text on the html page is no class or id or any ng-tag around it.
I am not a angularjs developer and the page was built on asp.net mvc with the view (cshtml) using angularjs version1.
Is there a way in angularjs to find and place the text like the way in javascript:
document.body.innerHTML = document.body.innerHTML.replace('old_text', 'new_text');
Thank you!
In angularjs each application state(page) has a controller. The logic to access the Dom should placed in said controller.
To manipulate the DOM please see this answer
In Angular world, it's called data binding. Here are the official docs on data binding.
Here is the working DEMO of data being updated in time. First, html displays "Initial Text" and in 5 seconds it's changed to "New Text".
What was done for this demo:
An angular component was created with a dedicated variable $scope.text that holds text values that will change in time.
Then, this variable is used in the HTML markup, like this: {{ text }}.
Angular handles the HTML re-rendering automatically for you, so when the value of $scope.text is modified in the component, Angular forces re-rendering of the html in the browser
UPD another example with Angular two-way binding: DEMO.
Here user can change $scope.text value in the input field, which automatically changes its value in the controller. Try to edit the input field and you will see how it instantly updates in the header above the input field.
I have the need to determine what app path my controller method will use for serving up the view before it does so. I'm using a theme but I also have many non-themed view files. I'm switching my themes based on domain name (2 domains point to the same Cake install) but need to exclude the non-themed views from rendering inside my theme.
This may sound confusing. Here's what is currently happening if a URL is accessed that does not have a theme view associated with it:
domainA.com/examples/index will render the view app/View/Examples/index.ctp with the layout from app/View/Layouts
domainB.com/examples/index will render the view app/View/Examples/index.ctp BUT with the layout from app/View/Themed/MyTheme/Layouts
This is because the "MyTheme" theme does not contain a view file for this controller-method pair (this is intentional). So I would like to instead have the following established:
domainB.com/examples/index continues to render the view app/View/Examples/index.ctp BUT INSTEAD with the layout from app/View/Layouts
This should only happen, of course, if and only if there is no view file within the "MyTheme" directory structure.
I think this is what you are looking for $this->View->viewPath.
You can use this in any controller call back function or action.
I have a small angular application which was written by a third party and I need to rearrange its layout (e.g. move a search form from the main body to the top menu bar).
Is there a way to determine which controller is triggered when a widget is active? Digging through source is OK and I'm doing it right now. However, I'd prefer something along the lines of a debug message
Widget [widget id] triggered [controller id]
Two ways to figure out the controller:
Check the ng-controller directive in the said HTML.
If you are using ng-route, then find the page URL in your code. Controller class can be defined when specifying routes.
Hope this helps.
I have a site build in MVC5 and C#. In this site I have a view (public.cshtml). In this view I have some text and beneith this text I would like to render another view (angular.html). The anguar.html view contains some angular script. How do I render the html page in the cshtml page correctly? Or is it even possible?
I have tried using Partial, RenderPartial and RenderPage but with no succes.
Any help is appreciated! Thanks in advance.
It depends on whether your public.cshtml is "covered" with ngApp or all angular-related stuff is in that "angular.html".
If it's the first, you could use ng-include:
<ng-include src="'/...'"></ng-include>
if it's the latter, you could use #Html.Raw(), like this
#Html.Raw(File.ReadAllText(Server.MapPath("~/...")))
where "..." is your relative path to angular.html.
I want to let the user crop an image, I found this JQuery plugin - http://deepliquid.com/content/Jcrop.html
I tried to use it with Angular-ui's Jquery passthrough option, adding the ui-jq=Jcrop directive to the <img>
The problem is that If I use ng-src to dynamically change the image it doesn't work and nothing is seen. If I change it to src and put a static url I can see the image and Jcrop.
how can I fix that ?
also, how can I listen to Jcrop's callbacks to know what is the user's selection ?
is there a better / simpler way to add image cropping functionality to AngularJS ?
Here is my solution:
I've written a directive that create img element and apply plugin on it. When src is changed, this img is removed and content that was created by plugin is also destroyed and then re-created new img with new src and again applied plugin on it.
Also provided 'selected' callback to be able to get coordinated that were selected (wrapped in $apply so you can modify your scope values in it).
Check my solution at Plunker
I've built a demo using AngularJS and Jcrop here:
Demo: https://coolaj86.github.com/angular-image-crop
On Github: https://github.com/coolaj86/angular-image-crop
You can leverage ui-event to create an event definition object with the keys being the event names and the values being the callbacks. Or you can simply pass these events as options to Jcrop (according to the documentation)
Finally, there is a new update coming to ui-jq that lets you add ui-refresh which is an expression to be watched to re-trigger the plugin.
Theoretically you should be able to do
<img ui-jq="Jcrop"
ui-options="{onSelect:myCallback}"
ui-event="{onChange:'myCallback($event)'}"
ui-refresh="imgSrc"
ng-src="imgSrc" />
Note: this simply re-fires the passthrough again, and doesn't automatically mean this will fix the problem or that the plugin will behave properly when re-initialized
We're still working on a good way to allow you to trigger different events at different times.