角度绑定到弹出框

如何解决角度绑定到弹出框

我正在尝试将 $scope.model.value 绑定到弹出框。

在所有文章中，我通过在 $scope 中存储一个副本然后使用手表来更新它，如果它改变了谁，这不是一个可行的解决方案，因为我想使用 popover 并多次使用它不同的数组。

我在主体上的 html 是：

                <button href="#" colorpopover
                        type="button"
                        class="btn btn-success btn-rainbow"
                        data-toggle="popover"
                        data-trigger="click"
                        title="Button Color"
                        id="static-color-popover-{{$id}}"
                        ng-model="model.value.buttonStatic.buttonColor">
                    Button Color
                </button>

我的控制器有这个代码

app.directive('colorpopover',function ($compile,$templateCache,$q,$http) {

    var getTemplate = function () {
        var def = $q.defer();

        var template = '';
        template = $templateCache.get('/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html');
        if (typeof template === "undefined") {
            $http.get("/App_Plugins/IBD.ButtonStyles/Popovers/IBD.Color.Popover.html").then(function (data) {
                $templateCache.put("templateId.html",data);
                def.resolve(data);
            });
        } else {
            def.resolve(template);
        }
        return def.promise;
    }
    return {
        restrict: "A",link: function (scope,element,attrs,model) {
            getTemplate().then(function (popOverContent) {
                // Make sure to remove any popover before hand (please confirm the method)
                var compileContent = $compile(popOverContent.data)(scope);
                var options = {
                    bindToController: true,content: compileContent,placement: "left",html: true,date: scope.date,};
                $(element).popover(options);
            });
        }
    };
});app.directive('colorpopover',};
                $(element).popover(options);
            });
        }
    };
});

基本术语中的模板 是

<div class="row">
    <div ng-repeat="colorGroup in model.value" ng-class="!$last ? '' : 'last'">
<p>{{colorGroup.val1}}</p>
<p>{{colorGroup.val2}}</p>
<p>{{colorGroup.val3}}</p>

模型结构是

$scope.model.value.buttonStatic.buttonColor[val1,val2,val3]
$scope.model.value.buttonStatic.buttonHover[val1,val3]
$scope.model.value.buttonStatic.buttonFocus[val1,val3]

所以最终我想要三个按钮作为上面传递的每个树值。

所以目前 ng-repeat 在子作用域的 model.value 上重复，它是父作用域的直接副本。

模板中的值将在弹出窗口中更改，因此需要返回到父级。

解决方法

经过反复试验，我解决了这个问题。

在指令中，我需要在链接前添加这两行。

require: 'ngModel',// ensures the model is passed in
scope: { model: '=ngModel' },//ties the ng-model to the scope of the popover

然后我需要做的就是将按钮中的 ng-model 设置为 model.value......

在弹出模板中我只使用模型