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>。我在这里错过了什么吗？

我尝试过的其他方法：

将ng-change添加到我的md-switch，该$scope.toggleView = $scope.switchView调用的函数会将另一个变量（例如switchView）与$scope.toggleView的值相等。然后ng-hide将ng-hide = "switchView == true"用于<div>。
<md-switch>。

非常感谢任何建议。谢谢。

更新1：为了测试它，我尝试将<img>隐藏在<nav>旁边，但效果非常好。但是它仍然无法使用我的<nav ng-controller="MainController">  <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>。

进一步检查显示它位于$scope.onChange = function(value) { $scope.$broadcast("view_mode", $scope.switchView); } $scope.$on("view_mode", function(event, switchValue) { $scope.viewThis= switchValue; });元素内。然而，他们都使用相同的控制器。我想知道这是不是问题？我认为这不应该是一个问题。

结构是这样的：

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

更新2：我在我的JS文件中添加了以下代码，因为有计划隐藏其他页面中的元素。它仍然无效。

ngMaterial

我的HTML现在看起来像这样：

MainController

对于控制器，var app = angular.module('myAppModule', [ // other references here 'ngMaterial' ]);在一个单独的JS文件（我们的主要文件）中被调用，以及所有依赖项和配置。因此，这不是在angular .module('myAppModule') .controller('MainController', ['$scope', function ($scope) { // functions etc. go here内部调用的。

mainApp.js

Cannot read property 'setAttribute' of null

mySample.js

 document.getElementById('Yes').checked = "checked";

希望这有助于清理事情。谢谢。

Answer 1

尝试这样的事情，这是一个微不足道的例子，但希望它有所帮助。这是一个工作codepen的链接。

根据文档，似乎有几种方法可以解决这个问题： Angular Material- MD-Switch

columns = {}
for row in reader:
    for fieldname in reader.fieldnames:
        columns.setdefault(fieldname, []).append(row.get(fieldname))

Answer 2

感谢所有投入的人。经过一些研究，我设法使用工厂（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传递的值。

希望这有帮助。

如何使用md-switch

2 个答案: