Question

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

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

更改value2很容易。我们有：

<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

您可以在控制器中调用功能，它会返回值：

<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 param值中使用ng-bind

2 个答案: