Question

我无法将$ scope.modalClick更新绑定到scope.modalClick，我想使用范围：{modalClick：＆＃34; =＆＃34;会解决它，但事实并非如此。如何从子范围（范围）到父范围（ $ scope ）进行双向绑定。

这是我的标记

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="js/modal.js"></script>
    <style>

        .btn { width:200px; height:30px; background-color:rgb(30, 50, 100); color:white; line-height:30px; text-align:center; }
        .btn:hover { background-color:#005cab; cursor:pointer; cursor:hand; }
        .modal-window-directive { width:100%; height:300px; background-color:orange; background-color:rgba(20, 20, 20, .5); }

    </style>
</head>
<body>
    <div modal-click="partials/form.html" modal-id="modform" bgcolor="rgb(10, 10, 10, .5)" width="400" height="200"class="btn">click me</div>
</body>
</html>

这是我的Javascript

if(typeof qs === "undefined"){

    window.qs = function(arg){ return document.querySelector(arg); };

}

var app = angular.module("modal", ["ngAnimate"]);

app.run(function($rootScope){

    console.log($rootScope);

});

angular.element(document).ready(function(){

    angular.bootstrap(document.querySelector("html"), ["modal"]);

});

function AppCtrl ($scope){

    $scope.setSource = function(src){



    }

    $scope.closeModal = function(){



    }

    $scope.openModal = function(){



    }

}

app.directive("modalClick", function($compile, $document){

    return {

        restrict:"A",
        scope:{

            modalClick:"@",
            modalId:"@",
            bgcolor:"@",
            width:"@",
            height:"@"

        },

        controller:"AppCtrl",

        link:function(scope, element, attr, ctrl){

            var modalElement = angular.element("<div class='modal-window-directive' style='position:absolute; top:0; bottom:0; left:0; right:0; width:100%; height:100%;'></div>");

            var modal = angular.element("<div class='modal-window-frame' ng-include='modalClick'></div>");

            angular.element(document.body).append(modalElement);

            if(scope.bgcolor){

                modalElement.css({backgroundColor:scope.bgcolor});

            } else {

                modalElement.css({backgroundColor:});

            }

            modalElement.append(modal);
            $compile(modal)(scope);


            scope.modalActive = false;

            scope.$watch("modalActive", function(newVal){

                if(newVal){

                    console.log("newVal :" + newVal);

                }


            })

            scope.toggle = function(){

                scope.$apply(function(){

                    scope.modalActive = !scope.modalActive;

                })

            }

            element.bind("click", function(e){

                scope.toggle();

            })


        }

    }

});

我知道有办法做到这一点。我在我的范围内遗漏了什么吗？我是否必须在html中找到控制器？我不确定如何解决这个问题，任何人都可以帮助或指出我正确的方向吗？我应该使用$ compile作为角度元素吗？

Answer 1

为了绑定到父作用域的属性，您需要将其作为属性的值传递，并在隔离范围中执行双向数据绑定。现在你没有将属性作为属性值传递。

此外，您不需要指令中的控制器绑定到父作用域。

最后，是的，你需要$compile元素才能使其成为“Angular-aware”（例如让ngInclude生效）。

HTML：

<div modal-click template-url="modalClick" class="btn">click me</div>

控制器：

function AppCtrl ($scope){
    ...
    $scope.modalClick = 'partial/form.html';
    ...

指令：

app.directive("modalClick", function($compile, $document){
    return {
        restrict: 'A',
        scope:{
            templateUrl: '='
        },
        link:function(scope, element, attr){
            /* Now `scope.templateUrl` is 2-way bound 
             * to parent scope's `modalClick` property */

            var modalElement = angular.element('<div class="modal-window-directive"><div class="modal-container-element" ng-include="templateUrl"></div></div>');

            $document.find('body').append(modalElement);
            $compile(modalElement)(scope);
        }
    };
});

角度表在一个带控制器的指令里面？

1 个答案: