动态角度指令中的两种方式绑定答案

【问题标题】：Two way binding in dynamic angular directive动态角度指令中的两种方式绑定
【发布时间】：2017-05-31 13:52:14
【问题描述】：

所以，我的目标是对一系列活动进行 ng-repeat，并根据活动类型显示特定指令。现在，我只是在测试这个想法，看看它是否可行。我可以动态显示指令，但关键是我希望在 main.js 中的活动和显示的指令之间有两种方式绑定。

main.html

<div ng-controller="mainCntrl">
  <div>Activity: { <div>isIncluded: {{activities[0].isIncluded}}</div> }</div>
  <dynamic-directive type="{{activities[0].type}}" attributes="instance='activities[0]'"></dynamic-directive>
</div>

main.js

define(['angularAMD', 'dynamicDirective', 'activity1'],
    function (angularAMD) {
        'use strict';

        var app = angular.module('mainModule', []);

        app.controller('mainCntrl', ['$rootScope', '$scope',
            function ($rootScope, $scope) {
                $scope.activities = [{
                    type: "activity1",
                    isIncluded: true
                }];
            }]);
    });

dynamicDirective.js

define('dynamicDirectiveModule', ['angularAMD'], function (angularAMD) {
    'use strict';
    var app = angular.module('dynamicDirectiveModule', []);

    app.directive('dynamicDirective', ['$compile',
        function ($compile) {
            return {
                restrict: 'E',
                scope: {
                    type: '@',
                    attributes: '@'
                },
                link: function (scope, element) {
                    var generatedDirective = '<' + scope.type + ' ' + scope.attributes + '></' + scope.type + '>';
                    element.append($compile(generatedDirective)(scope));
                }
            };
        }
    ]);
});

activity1.js

define('activity1Module', ['angularAMD'], function (angularAMD) {
    'use strict';
    var app = angular.module('activity1Module', []);

    app.controller('activity1Cntrl', ['$scope',
        function ($scope) {
            console.log("$scope.instance: " + $scope.instance);
            $scope.thisInstance = $scope.instance || {};
        }
    ]);

    app.directive('activity1', [
        function () {
            return {
                restrict: 'E',
                templateUrl: 'processes/templates/Activity1',
                controller: 'activity1Cntrl',
                scope: {
                    instance: '='
                }
            };
        }
    ]);
});

activity1.html

<div>
  <div>ISINCLUDED: {{thisInstance.isIncluded}}</div>
  <button ng-model="thisInstance.isIncluded" value="true">Yes</button>
  <button ng-model="thisInstance.isIncluded" value="false">No</button>
</div>

按照现在的设置方式，console.log 输出 $scope.instance 未定义。因此，$scope.thisInstance.isIncluded 默认为 false。如果在 main.html 中，我设置了attributes="instance='{{activities[0]}}'"，$scope.thisInstance.isIncluded 正确设置为 true，但我没有双向绑定，而不是作为本质上作为指针传递的活动 [0]，它传递值 { type: "activity1", isIncluded: true }。我怎样才能让双向绑定工作？是否可以？有没有更好的方法来做到这一点？

【问题讨论】：

你试过ng-include吗？可能没有那么花哨，但更简单
我确实看过它，但据我所知，ng-include 只编译 html。相反，我需要一个真正的指令，因为虽然我上面的示例只有两个按钮，但我打算拥有更多功能，例如保存我希望可重用的活动。
scope: { type: '=', attributes: '=' } 这样写你的范围
@YashKochar，我试过了，但 $scope.instance 在 activity1 指令中仍然未定义。
尝试将属性的数据格式从只是字符串更改为 JSON 对象 attributes="instance='activities[0]'" 而不是这样做 attributes="{ key: 'instance', value: activities[0] }" 并分别在另一个指令中处理对象。

标签： angularjs angularjs-directive two-way-binding

【解决方案1】：

我目前的解决方法是利用 ng-switch 并绕过 dynamicDirective.js。

main.html

<div ng-switch="activity.type" ng-repeat="activity in activities">
    <activity1 ng-switch-when="activity1" instance="activity"></activity1>
    <activity2 ng-switch-when="activity2" instance="activity"></activity2>
</div>

这不是最佳选择，因为它可能会很快变得丑陋。我不会将此标记为答案，因为它只是一种解决方法。

【讨论】：