Question

我是AngularJS的新手，我在下拉列表中显示表达式的值时遇到了问题。我注意到，当我对这样的值进行硬编码时，它会起作用：

<select ng-model="selectSort" ng-change="changeSort(selectSort)" ng-init="selectSort='0'">
<option value="0">Ändringsdatum, nyast överst</option>
<option value="1">Ändringsdatum, äldst överst</option>
<option value="2">Sidtitel</option>

我想知道的是，我如何从这样的表达式中获取值：

<select ng-model="selectSort" ng-change="changeSort(selectSort)" ng-init="{{SORT_TYPE.date}}">
<option value="{{SORT_TYPE.date}}">Ändringsdatum, nyast överst</option>
<option value="{{SORT_TYPE.dateDesc}}">Ändringsdatum, äldst överst</option>
<option value="{{SORT_TYPE.label}}">Sidtitel</option>

我到处搜寻并尝试了我想到的一切。

修改

angular.module('directives.sort', [])

.constant('SORT_TYPE', {
    date: '0',
    dateDesc: '1',
    label: '2'

})   

 .directive('sort', function (SORT_TYPE) {
     return {
         restrict: 'A',
         templateUrl: '/common/directives/sort/sort.html', 
         link: function (scope, element, attrs) {
             scope.SORT_TYPE = SORT_TYPE;                
         }
     };
 })

/ K

Answer 1

我希望你的控制器看起来像这样：

angular
  .module('app')
  .controller('MyCtrl',MyCtrl);

function MyCtrl() {
  var vm = this;
  vm.SORT_TYPE = {
    date: 'some date',
    dateDesc: 'some description',
    label: 'Date'
  };
}

Answer 2

将代码放入plunker似乎可行。

我将你的模板内联。

我猜你的模板被错误地引用了，或者你的指令使用不正确。

我还删除了你的ng-init，因为这导致了控制台错误。 Ng-init用于评估表达式，其中没有表达式。

您的代码应该与此类似。

https://plnkr.co/edit/5cKQIYzfjRDuBXcpAcyT?p=preview

HTML：

<body>
    <div ng-app="directives.sort">
      <div sort></div>
    </div>
</body>

JS：

angular.module('directives.sort', [])

.constant('SORT_TYPE', {
    date: '0',
    dateDesc: '1',
    label: '2'

})   

 .directive('sort', function (SORT_TYPE) {
     return {
         restrict: 'A',
         template: '<select ng-model="selectSort" ng-change="changeSort(selectSort)" ng-init="{{SORT_TYPE.date}}">'+
'<option value="{{SORT_TYPE.date}}">Ändringsdatum, nyast överst</option>'+
'<option value="{{SORT_TYPE.dateDesc}}">Ändringsdatum, äldst överst</option>'
+'<option value="{{SORT_TYPE.label}}">Sidtitel</option>', 
         link: function (scope, element, attrs) {
             scope.SORT_TYPE = SORT_TYPE;                
         }
     };
 })

显示表达式中的值

2 个答案: