Question

因此，我的目标是对一系列活动进行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}。如何让双向绑定工作？可能吗？有更好的方法吗？

Answer 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>

这不是最佳的，因为它可能会变得很难看。我不打算将此标记为答案，因为它只是一种解决方法。

动态角度指令中的双向绑定

1 个答案: