md-switchを使って<img>を非表示にする

Question

角材初心者はこちらです。私は、私たちのクライアントの指示に従って、スイッチを使って私たちのサイトのいくつかの要素を隠そうとしています。これは角度材料のmd-switchに私を導いた。

は、だから私はそう...

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

のようにそれを組み込む試み、このように私の要素のスイッチの値と呼ば：

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

かかわらず、それをテストした後、それはしませんでした私のswitchViewがその値を変更したとしても、私の<img>を隠してしまいます。私はここに何かを逃していますか私が試した

その他の方法：

1. switchViewの値を別の変数（例えば$scope.toggleView = $scope.switchView）に等しくなり関数を呼び出し、私のmd-switchにng-changeを追加します。 $scope.toggleViewは私のng-hideで使用されます。
2. ng-hide = "switchView == true"。

アドバイスをいただければ幸いです。ありがとうございました。

UPDATE 1：それをテストするために、私は私の横に<md-switch><div>を隠してみましたし、それは完全に働きました。しかし、それはまだ私の<img>で動作していません。

さらにチェックすると、<nav>要素の内部にあることが明らかになりました。しかし、彼らは両方とも同じコントローラを使用しています。それが問題なのだろうか？私はこれが原因で問題にならないと思った。他のページ内の要素を非表示にする計画がありますので、私は私のJSファイルに次のコードを追加しました：

<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：

構造は次のようです。それでも動作しませんでした。

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

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

私のHTMLは次のようになります。

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

は、コントローラについては、ngMaterialは、当社のすべての依存関係とのconfigsと一緒に、別のJSファイル（主力）で呼ばれていました。したがって、これは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 

が、これは明確に物事をアップに役立ちます願っています。ありがとうございました。

Answer 1

は、それらの入力を与えたすべての人に感謝します。いくつかの調査の後、私は工場（source）を使ってこの問題を解決することができました。

同じ問題が発生した人に役立つように私のソリューションを共有しています。

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; 
      } 
     }; 
    }); 

私たちのサイト内の他のコントローラがmd-switchで渡された値を使用できるように、私は工場を使用していました。

これが役に立ちます。

Answer 2

このようなものを試してください。そのほんの例ですが、役立つことを願っています。ここに作業するcodepenへのリンクです。

あなたは、ドキュメントによると、これを扱うことができるカップルの方法があるようです： 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>