如何在对象中传递font-size并在HTML绑定及动态修改div字号

Hey Ronaldino, let's tackle your three questions step by step with code examples tailored to your existing setup:

1. How to Pass the font-size Property in Your Object #

Your existing object structure is already valid (you correctly wrapped font-size in quotes since it contains a hyphen). To make this property accessible in your myWidget directive, you need to update the directive's scope to accept it.

AngularJS automatically converts kebab-case attribute names (like font-size) to camelCase in the scope, so we'll use fontSize as the scope property name to map to it:

app.directive('myWidget', function(){
  return{
    restrict:"EA",
    scope:{ 
      title:'@', 
      data:'=',
      fontSize: '=' // Adds binding for the font-size property
    },
    templateUrl:'spare.html',
  }
});

If you prefer passing the entire obj (cleaner if you have more properties later), adjust the scope to accept the full object instead:

app.directive('myWidget', function(){
  return{
    restrict:"EA",
    scope:{ 
      widgetObj: '=' // Bind the complete obj from your Items array
    },
    templateUrl:'spare.html',
  }
});

2. How to Bind the Property in HTML #

Option 1: Binding individual properties #

Update your gridster HTML to pass the font-size value from your Items array. Use kebab-case (font-size) in the HTML attribute, which maps to the camelCase fontSize in the directive scope:

<div gridster>
  <ul>
    <li ng-repeat="item in Items" gridster-item>
      <my-widget 
        title="{{item.obj.title}}" 
        data="item.obj.data"
        font-size="item.obj['font-size']">
      </my-widget>
    </li>
  </ul>
</div>

Then in your spare.html template, use ng-style to apply the font size dynamically:

<div ng-style="{ 'font-size': fontSize }">
  <h3>{{title}}</h3>
  <p>Data: {{data}}</p>
</div>

Option 2: Binding the entire object #

If you chose to pass the full widgetObj, your HTML would look like this:

<div gridster>
  <ul>
    <li ng-repeat="item in Items" gridster-item>
      <my-widget widget-obj="item.obj"></my-widget>
    </li>
  </ul>
</div>

And your spare.html would reference properties directly from widgetObj (with a default font size for entries that don't have the property):

<div ng-style="{ 'font-size': widgetObj['font-size'] || '16px' }">
  <h3>{{widgetObj.title}}</h3>
  <p>Data: {{widgetObj.data}}</p>
  <p>Right Value: {{widgetObj.right}}</p>
</div>

3. How to Dynamically Modify the Font Size #

Thanks to AngularJS's two-way data binding, you just need to update the font-size property in your Items array, and the view will automatically reflect the change.

First, add a function in your controller to modify the font size:

// Inside your controller
$scope.changeFontSize = function(itemIndex, newSize) {
  // Update the font-size property in the target item's obj
  $scope.Items[itemIndex].obj['font-size'] = newSize;
};

Then add triggers (like buttons) in your HTML to call this function:

<!-- Example buttons to adjust font sizes -->
<button ng-click="changeFontSize(0, '24px')">Make First Widget Larger</button>
<button ng-click="changeFontSize(1, '12px')">Make Second Widget Smaller</button>

When you click these buttons, AngularJS will detect the change to $scope.Items and update the ng-style in your widget template instantly.

内容的提问来源于stack exchange，提问作者ronaldino