将属性添加到我的angularjs自定义指令,并让其值听取相同的指令模型

时间:2016-04-21 21:20:21

标签: javascript angularjs angularjs-directive

我已经创建了一个自定义指令,但是我希望该指令获取一个注入其中的属性以及该指令中的元素来更改该指令的属性值。 这是代码:

最终我希望我的指令看起来像这样:

<joe-grid viewedtable="table1"></joe-grid>

table1,table2等..将根据下拉列表中的所选选项进行更改。

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

app.directive('joeGrid', function() {
  return {
    restrict: 'E',
    template: '<select name="myTables" id="myTables" ng-model="mytable"><option value="table1">table1</option><option value="table2">table2</option><option value="table3">table3</option><option value="table4">table4</option></select><h1>Hi there, it is me: {{adjective}}  </h1>',
    scope: {
      adjective: '@viewedtable',
    },
    link: function(scope, element, attrs) {
      attrs.$set('viewedtable', '{{mytable}}');
      // I want to viewtable attribute to be equal to ng-model=mytable 
    }
  }
});

angular.element(document).ready(function() {
  angular.bootstrap(document, ["app"])
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<joe-grid></joe-grid>

0 个答案:

没有答案