尝试使用来自指令的自定义代码使用双向数据绑定更改材料 md 选择的选项卡 [英] Trying to change the material md-selected tab using custom code from directive using two way data binding

问题描述

我正在尝试使用代码更改选项卡，但似乎无法找出错误.如果我们使用控制器来更改变量，那么基本的事情是可行的，但是当我尝试通过指令绑定它时，它就坏了.

var app = angular.module('MyApp', ['ngMaterial']);app.controller('HelloCtrl', function($scope) {$scope.selectedTab = 0;});app.directive('东西', function() {返回 {限制:'E'，模板:'<div ng-click="changeNavigation()">更改导航</div>',范围: {选择标签:'='},控制器:功能($范围){$scope.changeNavigation = function() {console.log('Hello World');$scope.selectedTab = 2;};}};});

您可以在 codepen 上查看有错误的工作代码:

解决方案

将 selectedTab="selectedTab" 更改为 selected-tab="selectedTab" 同时将参数传递给您的指令.

看到这个工作小提琴:http://jsfiddle.net/2yd9u7b9/

I'm trying to change the tab using code and can't seem to figure out the error. The basic thing works if we use the controller to change the variable but when I try to bind it through directive, it brokes.

var app = angular.module('MyApp', ['ngMaterial']);
app.controller('HelloCtrl', function($scope) {
  $scope.selectedTab = 0;
});
app.directive('something', function() {
  return {
    restrict: 'E',
    template: '<div ng-click="changeNavigation()">Change Navigation</div>',
    scope: {
      selectedTab: '='
    },
    controller: function($scope) {
      $scope.changeNavigation = function() {
        console.log('Hello World');
        $scope.selectedTab = 2;
      };
    }
  };
});

You can view the working code with error on codepen: http://codepen.io/piyushchauhan2011/pen/rVRqeV?editors=101

The error is:

解决方案

Change selectedTab="selectedTab" to selected-tab="selectedTab" while passing parameter to your directive.

See this working fiddle: http://jsfiddle.net/2yd9u7b9/

这篇关于尝试使用来自指令的自定义代码使用双向数据绑定更改材料 md 选择的选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！