Question

假设初始html代码是：

#!/usr/bin/kivy
import kivy
kivy.require('1.7.2')

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
import webbrowser

Builder.load_string('''
<MenuScreen>:
    GridLayout:
        padding: 5
        spacing: 5
        cols: 1
        padding: root.width*0.1
        Button:
            background_normal: ''
            background_color:(0.862, 0.078, 0.235, 0.9)
            text: 'PLAY'
            font_size: '20sp'
            on_press: root.val1()
''')

class MenuScreen(Screen):
    def val1(self):
        print "i am executed"
        webbrowser.open("http://google.com/")

sm = ScreenManager()
menu = MenuScreen(name='menu')
sm.add_widget(menu)

class MainApp(App):
    def build(self):
        return sm

if __name__ == '__main__':
    MainApp().run()

加载页面后，它会发出一些ajax请求并添加新的html

<div id="first" ng-controller="IndexPageController">

</div>

我的控制器

<div id="first" ng-controller="IndexPageController">
   <div id="appended">
      {{data}}
   </div>
</div>

由于新创建的DOM元素不会继承给定编译模板的$ scope。如何将dom元素绑定到控制器？

Answer 1

$compile服务可以满足您的需求。

段：

var app = angular.module("app", []);

app.controller("IndexPageController", function ($scope, $http, $compile, $timeout) {
    var htmlText = "<div id=\"appended\">" +
                   "{{data}}" +
                   "</div>";

    var linkFn = $compile(htmlText);
    var content = linkFn($scope);
    $("#first").append(content);
        
    $scope.data = "This should change after 5 seconds...";

    $timeout(function() {
        $scope.data = "Indeed, it is changed";
    }, 5000)
});

angular.bootstrap(document, ["app"]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>

<div>
    <div id="first" ng-controller="IndexPageController">
    </div>
</div>

PS。：生成的HTML将正确更新。您可以通过注入$timeout并添加以下代码来测试它：

$timeout(function() {
    $scope.data = "Indeed, it is changed";
}, 5000)

Answer 2

您应该使用$ compile链接模板和范围

angularjs将附加的html绑定到控制器

2 个答案: