Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html ng-app="app">
    <body ng-controller='testController'>
​
      <routes-view type="home" model="routeHome"></routes-view>
      
      <button ng-click="routeHome.loadData()">Click me</button>
​
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("app",[]);
            app.controller('testController',['$scope', function($scope){
                //your controller logic..
            }]);
            app.directive('routesView', function () {
              return {
                  template: '<div>Click on below button to load data...</div>',
                  restrict: 'E',
                  scope: {
                      type: '@',
                      model: '='
                  },
                  link: function (scope, element, attr, ctrl) {
​
                      scope.model = {};
                      scope.model.loadData = loadData;
                      
                      function loadData() {
                        if(scope.type === 'home') {
                          //your logic to fetch data
                          element[0].innerHTML = '<div><strong>Home data loaded</strong></div>';
                        }
                        //insert your logic for other cases
                      }
                    
                }
              };
          });
        </script>
    </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
sasikumardrpro
0viewers