Fatal编程技术网
  • javascript/
  • Javascript 在单击按钮之前，编译文本绑定不会显示

Javascript 在单击按钮之前，编译文本绑定不会显示

javascript angularjs

Javascript 在单击按钮之前，编译文本绑定不会显示,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我有一个简单的web应用程序，它按用户的名字和居住的城市列出用户。 当用户单击其名称或城市时，元素将被两个输入元素替换。一个是名字，第二个是他们居住的城市。输入元素将帮助用户更新他们的名字和城市。简单的AngularJS指令DOM操作 我遇到的问题是，当有人单击name或city元素时，绑定文本不会显示在输入元素中，直到您单击myinfo指令中的saveupdate按钮 这是HTML： <!DOCTYPE HTML> <html id="ng-app" ng-app="app"

我有一个简单的web应用程序，它按用户的名字和居住的城市列出用户。 当用户单击其名称或城市时，元素将被两个输入元素替换。一个是名字，第二个是他们居住的城市。输入元素将帮助用户更新他们的名字和城市。简单的AngularJS指令DOM操作

我遇到的问题是，当有人单击name或city元素时，绑定文本不会显示在输入元素中，直到您单击myinfo指令中的saveupdate按钮

这是HTML：

<!DOCTYPE HTML>
<html id="ng-app" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
</head>
<body> 
    <div  ng-controller="UserController">
        <div>
            Search:
            <input placeholder="search customers" data-ng-model="name" />
        </div>
        <div >
            <h4>Customers</h4>
            <ul>
                <li ng-repeat="cust in customers | filter:name" >
                                            <!-- My Info Directive -->
                    <info update="updateCustomer(this)" name="cust.name" city="cust.city"></info>
                </li>
            </ul> 
        </div>
        <div>
            Name: <input type="text" ng-model="newCustomer.name" /><br />
            City: <input type="text" ng-model="newCustomer.city" /><br />
            <button ng-click="addCustomer()" >Add New Customer</button>
        </div>
    </div>  

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" src="main.js"></script> 
</body>
</html>


JS
搜索：
客户

    

  • 

    • 


名称：

城市：

添加新客户
这是JavaScript（main.js）：

var-app=angular.module（“app”，[]）
.controller（'UserController'，function ControllerOne（$scope）{
$scope.customers=[
{名称：“米洛”，城市：“伦敦”}，
{姓名：“约翰”，城市：“纽约”}，
{名称：“阿尔弗雷德”，城市：“奥斯陆”}
];
$scope.addCustomer=函数（）{
$scope.customers.push（{name:$scope.newCustomer.name，city:$scope.newCustomer.city}）；
$scope.newCustomer.name=$scope.newCustomer.city=“”；
};
$scope.updateCustomer=函数（ele）{
控制台日志（“名称：+ele.Name+”城市：+ele.City）；
}
})
.directive（“info”，函数（$compile）{
返回{
限制：“E”，
范围：{
名称：“=”，
城市：“=”，
更新：“&”
},
模板：“{name}}-{{city}”，
链接：函数（范围、元素、属性）{
元素绑定（“单击”，函数（）{
var html=“保存更新”；
var dataScoped=$compile（html）（范围）；
元素。替换为（数据范围）；
});
}
}
});

单击
事件是异步的。这意味着您的范围不知道模型更改。只需将这两行代码包起来：

 var dataScoped = $compile(html)(scope);
 element.replaceWith(dataScoped);
具有
范围。$apply
：

 scope.$apply(function(){
     var dataScoped = $compile(html)(scope);
     element.replaceWith(dataScoped); 
 });
工作：

解决了问题。谢谢！我是否按照指令中的正确方式进行DOM操作？这是正确的角度方式吗？@milo我会把它放在一个模板中，就像：
template:“{{name}}-{city}

 scope.$apply(function(){
     var dataScoped = $compile(html)(scope);
     element.replaceWith(dataScoped); 
 });