Friday, March 28, 2014

ng-include dynamic change view and controllers

this story is a sample
when you want change view and controllers

this is a good example

<!DOCTYPE html>

    <script src="//"></script>
    <script data-require="angular.js@1.0.7" data-semver="1.0.7" src=""></script>
    <link rel="stylesheet" href="style.css" />
    <style type="text/css" media="all">
      .controller-a {background-color: yellow;}
      .controller-b-style {background-color: lightgrey;}

  <body data-ng-app="webApp">
    <h1>Hello Plunker!</h1>
    <div class="controller-a" ng-controller="ControllerA">
      Controller A
        <button ng-click="cntPlusPlus()">cnt++</button> CNT: {{cnt}}
      <button ng-click="addB()">Add B</button>
      <div ng-repeat="B in Bs">
       <div ng-include=""></div>
    <script type="text/ng-template" id="b-template">
      <div ng-controller="ControllerB">this is controller b: <button ng-click="cntPlusPlus()">cnt++</button></div>
      var webApp = angular.module("webApp",[]);
      webApp.controller("ControllerA", function($scope){
        $scope.cnt = 0;
        $scope.cntPlusPlus = function(){
        $scope.Bs = [];
        $scope.addB = function(){
      webApp.controller("ControllerB", function($scope){
        $scope.cntPlusPlus = function(){
          console.log("overwrite plus plus");
         // $scope.$parent.$parent.$parent.cnt++;  //should be moved to service

No comments:

Post a Comment