Call directive from ng-click of element inside a partial in AngularJS

Question

I have the following HTML:

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body ng-app="myApp">
    <div class="container">
        <div ng-view=""></div>
    </div>


    <!--Core JS Libraries-->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>

    <!--Core UI Library-->
    <script src="js/bootstrap.min.js"></script>

    <script type="text/javascript">
        //Define an angular module for our app
        var myApp = angular.module('myApp', ['ngRoute']);

        //Define Routing for app
        myApp.config(['$routeProvider',
          function ($routeProvider) {
              $routeProvider.
                when('/home', {
                    templateUrl: 'pages/View1.html',
                    controller: 'HomeController'
                }).
                when('/design', {
                    templateUrl: 'pages/2.html',
                    controller: 'DesignController'
                }).
                otherwise({
                    redirectTo: '/home'
                });
          }]);

        var controllers = {};
        controllers.HomeController = function ($scope) {
            $scope.GetView2 = function ($scope) {
                $('#one').hide();
                $('#two').show();

                myApp.directive('myDirective', function () {
                    return {
                        restrict: 'E',
                        templateUrl: 'pages/view2.html'
                    }
                });
            };
        };
        controllers.DesignController = function ($scope) {

        };

        //adding the controllers to myApp angularjs app
        myApp.controller(controllers);

    </script>
</body>
</html>

And my View1.html:

<button ng-click="GetView2()">Get View 2</button>
<br />
<div class="row" id="one">
    <h1>View 1</h1>
</div>
<div class="row" id="two" style="display: none;">
    <h1>View 2</h1>
    <!--change the display to block and load partial here on above button click-->
    <my-directive></my-directive>

</div>

And View2.html:

<h3>Something in View2</h3>

Now,when I run the HTML, on Button click, View 1 heading chanegs to View 2 heading, so my routing and GetView2() function calls are working. But my <my-directive> is not getting updated with View2.html which I am calling in the directive in templateUrl.

I am new to AngularJS and trying to use ng-view and directives for multiple views type of scenario. I have read that I should avoid nested views, and implement directives, but I am not getting how to implement such a simple scenario.

I can easily replace content of Div with id="two" using jQuery, but I am trying to do it in proper angularjs way.

Answer 1

There are better ways to achieve what you are trying.

First this

 $('#one').hide();
 $('#two').show();

should be avoided as this is direct DOM manipulation from Controller.

You should use or ng-show directive to show hide the element.

<div class="row" id="one" ng-show="currentView='one'">
<h1>View 1</h1>
</div>
<div class="row" id="two" ng-show="currentView='two'">
</div>

The controller should be

$scope.GetView2 = function ($scope) {
$scope.currentView='two';
}

For the directive that you have created can be done by ng-include such as

<ng-include src='pages/view2.html' />

and make sure there is a view at this path.

Call directive from ng-click of element inside a partial in AngularJS

Question

1 answers

solution1
2 ACCPTED 2014-01-19 16:34:08

Call directive from ng-click of element inside a partial in AngularJS

Question

1 answers

solution1 2 ACCPTED 2014-01-19 16:34:08

solution1
2 ACCPTED 2014-01-19 16:34:08