0

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 行目だけがランダムな赤に変わります。

4

2 に答える 2

1

コントローラーで値を返す関数を呼び出すことができます。

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

そしてあなたのコントローラーで：

$scope.getValue = function() {
    return type;
}
于 2015-03-10T11:50:34.007 に答える
0

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

どうもありがとう！

于 2015-03-11T13:47:06.763 に答える