42347

How to replace a part of sections in ng-view?

I'm leaning Angular's route. It's very clear how to load a view into ng-view by simply setting <strong>template</strong> attribute.

Let's say I have a widget on a view. When a user navigate to /#/changeWidget, how do I replace ONLY the widget content?

it looks like to me that I can only use single <strong>ng-view</strong>

<strong>main.html</strong>

<div ng-app="payment"> <div ng-view></div> </div>

<strong>js</strong>

var app = angular.module("payment",["ngRoute"]); function listController($scope) { } app.config(function($routeProvider, $locationProvider){ $routeProvider.when('/list', { templateUrl: 'templates/list.html', controller: listController }). when('/chagneWidget', { templateUrl: 'templates/widget2.html', controller: widget2Controller }). otherwise({ redirectTo: '/list' }); });

So basically, when '/changeWidget' gets triggered, I just want to replace a div from <strong>list.html</strong>

is it possible with router or should I just do...an ajax call and manipulate DOM?

Answer1:

I do not think it is easily possible with angular router -- and to be honest is quite a big limitation of it. But hey there is this very nice and popular module which offers such possibility: ui-router. In case you do not read documentation:

Warning: UI-Router is pre-beta and under active development. As such, while this library is well-tested, the API is subject to change. Using it in a project that requires guaranteed stability is not recommended.

Is it really necessary to update the widget by changing the route? If not there are plenty of options to do it in angular. If you really have to change the route you can use this hack:

$scope.$on("$locationChangeStart", function (event, next, current) { if (next == 'your_domanin/your_specific_url') { setTimeout(function() { $window.history.pushState("object or string", "Title", '/your_specific_url')},20); event.preventDefault(); // ... update your view } });

Answer2:

What would be wrong with using ngSwtich?

The ngSwitch directive is used to conditionally swap DOM structure on your template based on a scope expression... The directive itself works similar to ngInclude, however, instead of downloading template code (or loading it from the template cache), ngSwitch simply choses one of the nested elements and makes it visible based on which element matches the value obtained from the evaluated expression.

http://docs.angularjs.org/api/ng.directive:ngSwitch

Recommend

  • how to send JSON array through ajax?
  • Jsoup Parsing: Parsing dynamic values as Key value pair
  • Allow access only through iframe
  • How to extract the historical tweets from twitter API?
  • Compile Scala code to .class file, in Java
  • Difference in Liquibase Maven/CLI parameters
  • Swagger UI empty and gives 403
  • AngularJS + TypeScript: cannot inject $routeProvider
  • Origin is not allowed by Access-Control-Allow-Origin in angularjs and asp.net mvc
  • How to add extra logic on login condition in Laravel 5.2
  • With the maven-release-plugin, how to branch a module and its children?
  • Angular 2 CLI App throwing 404 errors once deployed
  • How to replace a part of sections in ng-view?
  • Are there any cases where it's better to use [NSFileManager defaultManager] rather than [[NSFil
  • AngularJS: accessing scope variables in $routeProvider
  • Tabs with different sidebars
  • Double Array to Object Array?
  • why route of backbone needs the default route
  • Multiple jQuery Mobile Count Bubbles
  • How to unit test a Angular 4 component which uses router.paramMap
  • Webpack-dev-server and isomorphic react-node application
  • Missing permission to control media error on Android 5/L
  • How can I print out a large table of symbols from MATLAB to form a cross-stitch chart?
  • IE11 textarea loses focus if another textarea is disabled
  • Ruby and class variables in inherit class
  • Insertion large number of Entities into SQL Server 2012 [duplicate]
  • Most efficient way to move table rows from one table to another
  • Why cepheus don't send int without quotes to orion?
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • Adjust width of select element according to selected option's width
  • Django rest serializer Breaks when data exists
  • How to delay loading a property with linq to sql external mapping?