Javascript 在AngularJS中使用默认属性

我正在开发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>'
  };
});

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

...
...

定义此指令的代码如下所示：

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

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

myApp.directive（'myView'，function（$window）{
返回{
限制：'E'，
是的，
范围：{
大小：'=？'
},
控制器：功能（$scope）{
if（角度.isUndefined（$scope.size））{
$scope.size='medium'；
}
},
模板：“{size}}
我是HUGEI是个小东西我是默认的”
};
});

由于某种原因，我的指令不起作用。我注意到第一个{size}没有打印任何内容。然而，如果我在控制器中执行console.log（$scope.size），我会得到控制台窗口中显示的大小。它类似于在控制器初始化之前渲染视图

---

我做错了什么？

您的指令有两个地方出错：

您应该避开模板中的撇号

如果要将属性作为字符串传递，则应使用

@

，等号

=

用于将指令的属性与父范围的属性进行数据绑定 因此，您的directvive应该如下所示：

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

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

角度模块（'test'，[]） .controller（'controller'，['$scope'，function（$scope）{ $scope.test='asdf'； }]) .directive（'myView'，函数（$window）{ 返回{ 限制：'E'， 范围：{ 大小：'@' }, 控制器：功能（$scope）{ if（角度.isUndefined（$scope.size））{ $scope.size='medium'； } }, 模板：“{size}}
我是HUGEI我是个小东西我是默认的” }; });

---

不要使用双向模型绑定（作用域：{=}）。您应该使用属性字符串绑定（作用域：{@}）