Question

我正在使用AngularJS应用。在这个应用程序中，我正在处理自定义指令。该指令将根据自定义属性值进行不同的呈现。目前，My指令如下所示：

<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}}没有打印出任何内容。但是，如果我在控制器中执行console.log（$ scope.size），我会在控制台窗口中显示大小。就像视图在控制器完成初始化之前渲染一样。

我做错了什么？

Answer 1

您的指令有两个问题：

你应该逃避模板的撇号。
如果要将属性作为字符串传递，则应使用@，等号=用于将指令的属性与父作用域的属性绑定。

所以你的直觉应该是这样的：

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>'
  };
});

在AngularJS中使用默认属性

1 个答案:

Working Example