How to hide using md-switch

Question

angular-material newbie here. I'm trying to hide some elements in our site using a switch, as instructed by our client. This led me to angular-material's md-switch.

So I tried incorporating it like so...

<md-switch md-no-ink aria-label="switchView" ng-model="switchView">{{switchView}}</md-switch>

And called the value of the switch in my element like this:

<img ng-src="{{photoPath}}" class="profilePic" ng-hide="switchView"/>

After testing it though, it didn't hide my <img> even though my switchView changed its value. Am I missing something here?

Other methods I've tried:

Adding ng-change to my md-switch, which called a function that would equate another variable (e.g. $scope.toggleView = $scope.switchView) with switchView's value. $scope.toggleView would then be used in my ng-hide.
ng-hide = "switchView == true".

Any advice would be very much appreciated. Thank you.

UPDATE 1: To test it, I tried hiding the <div> beside my <md-switch> and it worked perfectly. However it's still not working with my <img>.

Further checking revealed that it was inside a <nav> element. However they're both using the same controller. I wonder if that's the problem? I assumed that it shouldn't be a problem because of this.

The structure is like this:

<nav ng-controller="MainController">
    <!-- other navigation elements here -->
    <img ng-src="{{photoPath}}" class="profilePic" ng-hide="switchView"/>
</nav>

<div ng-controller="MainController">
    <div>Toggle Switch</div>
    <md-switch md-no-ink aria-label="switchView" ng-model="switchView">{{switchView}}</md-switch>
</div>

UPDATE 2: I've added the following code in my JS file because there are plans to hide elements in other pages. It still didn't work.

$scope.onChange = function(value) {
    $scope.$broadcast("view_mode", $scope.switchView);
}

$scope.$on("view_mode", function(event, switchValue) {
   $scope.viewThis= switchValue; 
});

My HTML now looks like this:

<img ng-src="{{photoPath}}" class="profilePic" ng-hide="viewThis"/>

As for the controller, ngMaterial was called in a separate JS file (our main), together with all our dependencies and configs. Hence, this wasn't called inside MainController.

mainApp.js

var app = angular.module('myAppModule', [
    // other references here
    'ngMaterial'
]);

mySample.js

 angular
    .module('myAppModule')
    .controller('MainController', ['$scope', function ($scope) {
          // functions etc. go here

Hope this helps clear things up. Thank you.

I don't see anything wrong in your code snippet. Perhaps something is missing from your controller or your controller is not working at all. http://codepen.io/anon/pen/WGqrEr — whyyie, Oct 29 '16 at 14:39
Thank you for the sample code. One question: what does `material.svgAssetsCache` mean? — Dee J., Oct 29 '16 at 14:47
Not relevant. You can remove it in your code and it works fine. — whyyie, Oct 29 '16 at 14:55
Thank you. I modified my question to include more of my source code for your info. — Dee J., Oct 29 '16 at 15:21
I think you should do a pen/fiddle. What version of angular are you using, are you using a router, if not why are you referencing the same controller at two different tags, why not move it up over an element that spans over both? — alphapilgrim, Oct 29 '16 at 19:27
Also, i believe its $rootScope.$broadcast, heres a SO question on that. may shed some light. http://stackoverflow.com/a/19446975/4812515 — alphapilgrim, Oct 29 '16 at 19:42

alphapilgrim · Answer 1 · 2016-10-29T14:52:53.853

Try something like this, its a trivial example but hope it helps. Here's a link to working codepen.

There seems to be a couple ways you could handle this according to the docs: Angular Material- MD-Switch

function exampleController($scope) {
  $scope.secondModel = false;
  $scope.onChangeEvent = function(value) {
    $scope.imgSource = (value) ? 'http://www.fillmurray.com/300/200' : 'http://www.fillmurray.com/g/155/300';
  };
  // alternatively: you could set the ternary to empty string value here.
}
angular
  .module('BlankApp', ['ngMaterial'])
  .controller('exampleController', exampleController);



<md-switch ng-model="switchValue" ng-change="onChangeEvent(switchValue)">
  <img ng-src="{{imgSource}}" alt="" />
</md-switch>

<md-switch ng-model="secondModel">
  <img src="http://www.fillmurray.com/300/200" alt="" ng-hide="secondModel" />
</md-switch>

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Thank you to everyone who gave their inputs. After some research, I managed to solve this problem using factories (source).

I'm sharing my solution so that it may help others who experience the same problem.

HTML:

<nav ng-controller="MainController">
    <!-- other navigation elements here -->
    <img ng-src="{{photoPath}}" class="profilePic" ng-hide="switchView"/>
</nav>

<div ng-controller="MainController">
    <div>Toggle Switch</div>
    <md-switch md-no-ink aria-label="switchView" ng-model="switchView" ng-change="onChange(switchView)">{{switchView}}</md-switch>
</div>

JS:

angular
    .module('myAppModule')
    .controller('MainController', ['$scope', 'ViewModeFactory', function ($scope, ViewModeFactory) {
          // functions etc. go here

        // For client presentation mode
        $scope.onChange = function(value) {
            ViewModeFactory.setViewMode($scope.switchView);
        }

        $scope.$watch(function (){
            $scope.switchView = ViewModeFactory.getViewMode();   
        });
  }])
    .factory('ViewModeFactory', function () {
         var data = {isViewMode: ''};

         return {
            getViewMode: function () {
                return data.isViewMode;
            },
            setViewMode: function(value) {
                data.isViewMode = value;
            }
        };
    });

I used factories so that other controllers in our site can use the value passed by md-switch.

Hope this helps.

How to hide using md-switch

2 Answers2