在AngularJS中使用默认属性

Using Default Properties in AngularJS

本文关键字：默认属性 AngularJS 更新时间：2023-09-26

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

我做错了什么？

您的指令有两个错误：

您应该转义模板中的撇号
如果要将属性作为字符串传递，则应使用@，等号=用于将指令的属性与父作用域的属性进行数据绑定

所以你的直接联系人应该是这样的：

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中使用默认属性

Using Default Properties in AngularJS

工作示例