Question

是否有可能决定html元素创建时间，不包括或包含元素属性，如设置回调？

当使用ng-repeat流时，我有一些条件，我想用close-callback处理程序创建html元素，在某些情况下，元素不应该包含close处理程序定义。

<div ng-repeat="item in ctrl.items" 
close="ctrl.close()">XYZ</div>

...或没有回拨..

<div ng-repeat="item in ctrl.items">XYZ</div>

...也许像 ng-if ？有可能吗？检查条件在项目本身中。所以在 ng-repeat 期间，我需要检查一些内部状态如：

item.state === 'state1' ? add close handler : do nothing ...

我可以在哪里添加此条件检查以及我如何执行关闭处理程序添加？

干杯

Answer 1

您可以使用自定义指令来解决此问题，这是一个示例：

可关闭的项目是彩色的，并且有一个onclick事件监听器（尝试点击它）。

要关闭，项目状态必须与closable-state属性值匹配。

使用closable-state="'value'"时，您必须在值周围使用单引号，以防止将value作为表达式进行评估。

如果value是硬编码字符串，那么您可以从指令中删除state: "=closableState"，只需使用attrs.closableState来检索属性值。

希望有所帮助。

angular.module('app', []);

angular
    .module('app')
    .controller('ExampleController', ['$scope', function ($scope) {
        $scope.items = [
            { label: "item1", state: "state1" },
            { label: "item2", state: "state2" },
            { label: "item3", state: "state1" },
        ];
    }])
    .directive('closable', function () {
        return {
            restrict: 'A',
            scope: {
                item: "=closable",
                state: "=closableState",
            },
            link: function (scope, element, attrs) {

                var clickListener = function (event) {
                    alert("I'm closable !");
                }

                if (scope.item && scope.item.state === scope.state) {
                  element.addClass("colored");  
                  element.bind("click", clickListener);
                }
            }
        };
    });

.colored { color: red }

<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="ExampleController">
  <ul>
    <li ng-repeat="item in items" closable="item" closable-state="'state1'">{{item.label}}</li>
  </ul>
</body>
</html>

Answer 2

利用Logical Operator Short Circuit Evaluation：

<div ng-repeat="item in ctrl.items" 
     close="item.closable && ctrl.close()">XYZ</div>

当item.closable为false时，将不会评估ctrl.close()函数。因此，根据item.closable的值来有条件地评估函数。

是否可以在某些情况下创建HTML元素属性？

2 个答案: