javascript - 在 AngularJS 中使用默认属性

Question

我正在开发 AngularJS 应用程序。在此应用程序中，我正在研究自定义指令。该指令将根据自定义属性值以不同方式呈现。目前，我的指令如下所示:

<my-view size="small"></my-view>
...
<my-view></my-view>
...
<my-view size="large"></my-view>

定义该指令的代码如下所示:

myApp.directive('myView', function ($window) {
  return {
    restrict:'E',
    transclude: true,
    scope: {
      size: '=?'
    },
    controller: function($scope) {
      if (angular.isUndefined($scope.size)) {
        $scope.size = 'medium';
      }
    },
    template: '<div>{{size}}<br /><div ng-if="size == 'large'">I'm HUGE</div><div ng-if="size=='small'">I'm a wee little thing</div><div ng-if="size == medium">I'm the default</div></div>'
  };
});

由于某种原因，我的指令不起作用。我注意到第一个 {{size}} 没有打印出任何内容。然而，如果我在 Controller 中执行 console.log($scope.size) ，我会得到控制台窗口中显示的大小。就像在 Controller 完成初始化之前 View 就已渲染一样。

我做错了什么？

Answer 1

您的指令有两处错误:

1. 您应该转义模板中的撇号。
2. 如果要将属性作为字符串传递，则应使用 @，等号 = 用于将指令的属性与以下属性进行数据绑定(bind)父范围。

所以你的指令应该是这样的:

angular.module('test', [])
  .controller('Controller', ['$scope', function($scope) {
      $scope.test = 'asdf';
  }])
  .directive('myView', function ($window) {
  return {
    restrict:'E',    
    scope: {
      size: '@'
    },
    controller: function($scope) {
      if (angular.isUndefined($scope.size)) {
        $scope.size = 'medium';
      }
    },
    template: '<div>{{size}}<br/><div ng-if="size ==\'large\'">I\'m HUGE</div><div ng-if="size==\'small\'">I\'m a wee little thing</div><div ng-if="size == medium">I\'m the default</div></div>'
  };
});

Working Example