Question

我的页面上有自己的标签。这个标签我替换INPUT。并且所有INPUT都具有相同的值。但是用户可以改变模式：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 Developer Tools中更改了STATE的值（例如从'readonly'更改为'editable'），我没有更改。因为我的代码没有看到它。

Answer 1

在您的指令中，您可以使用attrs.$observe()来查看具有指令的元素的属性，并在其发生更改时执行代码。像这样：

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

Link to the docs

修改

以下是如何在代码中使用它的示例：

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 个答案: