有角度的。從視圖設置屬性

Question

我在頁面上有自己的標簽。 我在輸入上替換了這個標簽。 並且所有INPUT都具有相同的值。 但是用戶可以更改模式：輸入可以是READONLY，DISABLED和EDITABLE。

我這樣做是：當我將TAG轉換為INPUT時，我添加了屬性readonly =“ readonly”，disabled =“ disabled”，editable =“ editable”。 但是我可以從視圖中動態更改它。

    <!DOCTYPE html>
<html  ng-app="myDirective" ng-controller="ctrl">
<head>
    <meta charset="utf-8" />
    <title>in</title>
<style>
    .red {background: red;}
    .green {background: green;}
</style>
</head>
<body>
        <tag value="it's value" state="readonly" css="red" ></tag><span>state="readonly"</span><br>
        <tag value="{{value}}" state="disabled" css="{{class}}" ></tag><span>state="disabled"</span><br>
        <tag value="{{value}}" state="editable" css="{{class}}" ></tag><br>
        <tag value="{{value}}" state="readonly" css="{{class}}" ></tag><span>state="readonly"</span><br>
        <tag value="{{value}}" state="readonly" css="green" ></tag><span>state="readonly"</span><br>
        <tag value="{{value}}" state="editable" css="{{class}}" ></tag><br>
        <tag value="{{value}}" state="editable" css="{{class}}" ></tag><br>
        <tag value="{{value}}" state="disabled" css="{{class}}" ></tag><span>state="disabled"</span><br>
        <tag value="{{value}}" state="editable" css="{{class}}" ></tag><br>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>

var myapp = angular.module("myDirective", []);

myapp.service('MyIdService', function(){
    var index = 1;

    this.getAndIncrement = function () {
        return index++;
    }
});
myapp.directive('tag', ['MyIdService', function(MyIdService){
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: false,
      template: '<input type="text" id="id{{index}}" my-directive="curdata" placeholder="type smth" ></input>', 

      link: function(scope, element, attrs) {
            scope.value = attrs.value;
            scope.index = MyIdService.getAndIncrement();

            element.attr('class', attrs.css); //replace attribute CSS to CLASS

            switch(attrs.state) {
                case "disabled":
                    element.attr('disabled', 'disabled');
                    break;
                case "readonly":
                    element.attr('readonly', 'readonly');
                    break;
                case "editable":

                    break;
                case "":

                    break;
                default:
                    // nothing
            } 
            //element.removeAttr('displaymode');    //doesn't work 
            //element.removeAttr('value');  //doesn't work 
     }
    };
}]);

myapp.directive('myDirective', function () {
        return {
            restrict: 'A',
            scope: {
                myDirective: '='
            },
            link: function (scope, element, attrs) {
                // set initial value of textfield
                // element.val(scope.myDirective);
                // element.data('old-value', scope.myDirective);

                // detect changes and update INPUT
                scope.$watch('myDirective', function (val) {
                if (attrs.state == "editable") {
                element.val(scope.myDirective);
                }
                });

                // events
                element.bind('propertychange keyup cut paste blur input', function (blurEvent) {

                    if (attrs.state == "editable") {    
                        if (element.data('old-value') != element.val()) {
                            scope.$apply(function () {
                                scope.myDirective = element.val();
                                element.data('old-value', element.val());
                            });
                        }
                    }
                });
            }
        };
    });

/**
* when document opened, set current date
*/
function ctrl($scope, $filter ) {
    $scope.curdata= $filter('date')(new Date(), 'yyyy');

  }

//  Get INPUT ID which you click
var target_id = '';
document.body.onclick = function(e) {
    var event = e || window.event;
    var target = event.target || event.srcElement; 

    if (target.tagName != 'INPUT') return; //CAPITAL

    target_id = target.getAttribute('id');
    return false;
};
</script>
</body>

</html>

我需要觀看“ STATE”屬性的更改。 如果我在Mozilla開發人員工具中將STATE的值（例如，從“只讀”更改為“可編輯”），則沒有任何更改。 因為我的代碼看不到。

Answer 1

在指令內部，您可以使用attrs.$observe()監視具有指令的元素上的屬性，並在更改時執行代碼。 像這樣：

    attrs.$observe('state', function(newAttributeValue) {
        // do something with newAttributeValue
    });

鏈接到文檔。

編輯

這是如何與代碼一起使用的示例：

HTML：

<tag value="it's value" state="myStateVariable" css="red" >
<button ng-click="changeState('editable')">Edit</button>

Javascript（在您的AngularJS控制器中）：

$scope.myStateVariable = "readonly";

$scope.changeState = function(newState) {
    $scope.myStateVariable = newState;
}

您似乎在頁面上有很多這樣的標簽，因此顯然您不想為每個標簽創建一個變量。 您可以使用普通的舊javascript對象作為哈希圖，以跟蹤每個標記的所有狀態。

有角度的。從視圖設置屬性

問題描述

1 個解決方案

解決方案1
0 2014-05-11 18:51:29

有角度的。 從視圖設置屬性

問題描述

1 個解決方案

解決方案1 0 2014-05-11 18:51:29

有角度的。從視圖設置屬性

解決方案1
0 2014-05-11 18:51:29