相关疑难解决方法(0)

假设我们正在使用AngularJS构建一个地址簿应用程序(人为的例子).

我们有一个联系人表单,其中包含电子邮件和电话号码的输入,我们想要一个或另一个,但不是两个:我们只希望输入为空或无效时email需要phone输入,反之亦然.

Angular有一个required指令,但从文档中不清楚如何在这种情况下使用它.那么我们如何才能有条件地要求表格领域呢？写一个自定义指令？

情况

嵌套在我们的Angular应用程序中的是一个名为Page的指令,由一个控制器支持,该控制器包含一个带有ng-bind-html-unsafe属性的div.这被分配给名为'pageContent'的$ scope var.此var从数据库中分配动态生成的HTML.当用户翻转到下一页时,会调用DB,并将pageContent var设置为这个新的HTML,它将通过ng-bind-html-unsafe在屏幕上呈现.这是代码:

页面指​​令

angular.module('myApp.directives')
    .directive('myPage', function ($compile) {

        return {
            templateUrl: 'page.html',
            restrict: 'E',
            compile: function compile(element, attrs, transclude) {
                // does nothing currently
                return {
                    pre: function preLink(scope, element, attrs, controller) {
                        // does nothing currently
                    },
                    post: function postLink(scope, element, attrs, controller) {
                        // does nothing currently
                    }
                }
            }
        };
    });

Page指令的模板(上面的templateUrl属性中的"page.html")

<div ng-controller="PageCtrl" >
   ...
   <!-- dynamic page content written into the div below -->
   <div ng-bind-html-unsafe="pageContent" >
   ...
</div>

页面控制器

angular.module('myApp') …

我想将角度事件和模型绑定到javascript代码附加的html元素.

我的代码在这里.https://jsfiddle.net/hq7qk48n/13/

<div ng-app>
    <div ng-controller="MyController">
        <input type="text" ng-model="text1">
        <a href="#" ng-click="onClick()">click1</a>

        <div id="append"></div>
        <p ng-if="clickedTime1">click1 : {{ clickedTime1.toLocaleString() }}</p>
        <p ng-if="clickedTime2">click2 : {{ clickedTime2.toLocaleString() }}</p>
        <p>{{ text1 }}</p>
        <p>{{ text2 }}</p>
    </div>
</div>


function MyController($scope) {
    $scope.clickedTime1 = null;
    $scope.clickedTime2 = null;

    $scope.onClick = function () {
        var html = '<input type="text" ng-model="text2" name="text"> <a href="#" ng-click="onClick2()">click2</a>';
        $("#append").empty();
        $("#append").append(html);
        $scope.clickedTime1 = new Date();
    }

    $scope.onClick2 = function () {
        $scope.clickedTime2 = new Date();
    };
}

onClick2()不起作用.并且模型"text2"未更新.如何绑定onClick2函数和text2模型？

需要编译一个html元素？怎么样？