如何在 HTML 参数值中使用 ng-bind

Question

我想在 AngularJS 中使用 ng-bind 指令而不是括号 {{ }}。我们有例子：

<tag type="{{value1}}">{{value2}}</tag>

更改值 2 很容易。我们有：

<tag type="{{value1}}" ng-bind="value2"></tag>

我们如何更改 {{value1}} 以删除括号符号？

DonJuwe 的第一个解决方案不适合我。也许我做错了什么。例如 HTML:

<div ng-controller="TestController">
    1. <p style="{{style}}">{{style}}</p>
    2. <p style="getStyle()" ng-bind="style"></p>
    3. <p style="getStyle()" ng-bind="getStyle()"></p>
    <input type="button" ng-click="setStyle()" value="Change Style" />
</div>

在控制器中：

var module = angular.module('myApp', []);

module.controller('TestController', function ($scope) {
    $scope.style = 'color: rgb(0, 0, 0)';

    $scope.getStyle = function() {
        return $scope.style;
    };

    $scope.setStyle = function() {
        $scope.style = 'color: rgb('+Math.floor(Math.random() * 255)+', 0, 0)';
    }
});

点击按钮后，所有文本（1.、2.、3.）都是正确的，但只有第 1 行将颜色更改为随机红色。

Answer 1

您可以在您的控制器中调用函数，其中returns值：

<tag type="getValue()" ng-bind="value2"></tag>

并且在您的控制器中：

$scope.getValue = function() {
    return type;
}

Answer 2

DonJuwe 的决心：

HTML:

<div ng-controller="TestController">
    1. <p style="{{style}}">{{style}}</p>
    2. <p style="{{style}}" ng-bind="style"></p>
    3. <p my-style ng-bind="style"></p>
    <input type="button" ng-click="setStyle()" value="Change Style" />
</div>

控制器：

var myApp = angular.module('myApp',[]);

myApp.directive('myStyle', function() {
    return {
        scope: {
            color: '=ngBind'
        },
        link: function(scope, elem) {
            elem.attr('style', scope.color);
            scope.$watch('color', function() {
                elem.attr('style', scope.color);
            });
        }
    }
});

function TestController($scope) {    
    $scope.style = 'color: rgb(0, 0, 0)';

    $scope.setStyle = function() {
        $scope.style = 'color: rgb(' + 
            Math.floor(Math.random() * 255) + 
            ', ' + 
            Math.floor(Math.random() * 255) + 
            ', ' + 
            Math.floor(Math.random() * 255) + 
            ')';
    }
}

非常感谢！

如何在 HTML 参数值中使用 ng-bind

How to use ng-bind in HTML param values

angularjs

ng-bind