1

I asked this already but have not achieved the following. I'm am trying to get Angular to talk across Controllers in MVC to control a paragraph being visible/ hidden. I am using Typescript, not Javascript.

I have two controllers and two views, view1.cshtml/view1.ts and view2.cshmtl/view2.ts.

In view1.cshtml I have a button:

  <a class="Button" id="button1" data-ng-click="minorTask(); toggle()">Click</a>

I have added in toggle() as the function I want to use to show the paragraph in view2.cshmtl.

The div in view2.cshtml:

 <div id="toggleThis">
  <p>Some text<p>
 <div>

I want the button in view1 to be tied to the toggleThis visibility from view2. When button1 is clicked it should set the text in view2 to be visible, while it carries out the other function as normal.

Q1: How do I set it up so that when button1 is clicked it sets toggleThis from hidden to visible?

Q2: How do I set toggleThis to be initially hidden?

Q3: In which Typescript file should I put the function(s)?

Rebecca O'Riordan
  • 863
  • 8
  • 23
  • It is only possible by using either factory / service or inject controller service in your controller. You have one variable in first controller's scope and want to access it in second controller. You should see https://docs.angularjs.org/api/ng/service/$controller – Vineet May 27 '15 at 13:34
  • I am new to angular and don't understand where I should put the $controller directive. Do I need to put it in both toggleThis and button1? – Rebecca O'Riordan May 27 '15 at 13:42
  • 2
    http://stackoverflow.com/questions/25417162/how-do-i-inject-a-controller-into-another-controller-in-angularjs – Vineet May 27 '15 at 13:43

1 Answers1

1

If I got your questions:

  • A1:

Html:

<a class="Button1" data-ng-click=minorTask()>Click</a>

Css:

.toggleThis{.....; display: none;} //Saying toggleThis is initialized has Hidden

myViewController:

myApp.controller("myController", ["$scope", function($scope){
  $scope.minorTask = function(){ //triggers when called by button1 being clicked

     //change toggleThis from hidden to block
     angular.element('toggleThis').css('display','block');
  }
}})
  • A2:

In order to get toggleThis intially hidden you have to set .toggleThis{display:none;} in your Css.

  • A3:

In my opinion you should put your functions into your controllers has shown before. Look at this example, I made it using some jquery. I hope I've been helpfull.

AndreaM16
  • 3,917
  • 4
  • 35
  • 74