與$角材料關注

Question

<md-menu id="user-status-menu" md-position-mode="{{vm.position}}" md-offset="{{vm.offset}}"> 

我想更新MD-位置模式和控制器MD-偏移值動態。 但它只在頁面加載時才工作。

價值變化時如何更新和生效？

Answer 1

第一個查看整體頁面查看，其右側爲「運行代碼段」。點擊「運行片段」，然後點擊「全頁」

1. 變化0 -5到0 50向下移動
2. 變化0 -5到50 -5向右移動
3. 變化target target到target-right target和0 -5到""菜單在右側

mdMenu

var myApp = angular.module('myApp', ['ngMaterial']); 
 

 
myApp.controller('myController', 
 
    function myController($scope, $mdDialog){ 
 
    $scope.vm = { 
 
    "position": "target target", 
 
    "offset": "0 -5" 
 
    }; 
 
    
 
    var originatorEv; 
 
    $scope.openMenu = function($mdOpenMenu, ev) { 
 
     originatorEv = ev; 
 
     $mdOpenMenu(ev); 
 
    }; 
 
    
 
    $scope.announceClick = function(index) { 
 
     $mdDialog.show(
 
     $mdDialog.alert() 
 
      .title('You clicked!') 
 
      .textContent('You clicked the menu item at index ' + index) 
 
      .ok('Nice') 
 
      .targetEvent(originatorEv) 
 
    ); 
 
     originatorEv = null; 
 
    }; 
 
    
 
});

.menudemoMenuPositionModes .md-menu-demo { 
 
    padding: 24px; } 
 

 
.menudemoMenuPositionModes .menu-demo-container { 
 
    min-height: 200px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 
 
<!-- Angular Material requires Angular.js Libraries --> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller='myController'> 
 
    Position: <input type="text" name="position" ng-model="vm.position"> 
 
    Offset: <input type="text" name="offset" ng-model="vm.offset"> 
 
    <p>$scope.vm = {{ vm | json }};</p> 
 
    
 
     <div layout="column" flex-xs="100" flex-sm="100" flex="33" layout-align="center center"> 
 
     <p>Target mode with <code>md-offset</code></p> 
 
     <md-menu md-position-mode="{{vm.position}}" md-offset="{{vm.offset}}"> 
 
      <md-button class="md-raised md-primary" aria-label="Open demo menu" ng-click="openMenu($mdOpenMenu, $event)"> 
 
      Open 
 
      </md-button> 
 
      <md-menu-content width="4"> 
 
      <md-menu-item ng-repeat="item in [1, 2]"> 
 
       <md-button ng-click="announceClick($index)"> <span md-menu-align-target>Option</span> {{item}} </md-button> 
 
      </md-menu-item> 
 
      </md-menu-content> 
 
     </md-menu> 
 
     </div> 
 
    
 
    </div> 
 
</div>