Question

Hello All Angular Friends

我正在尝试找到一种动态数据绑定到模板的方法。

创建了一个测试页：http://jsbin.com/jiminey/edit?html,js,output。

目前我有我的HTML

public void req()
{
    try {

        String query = "access_token=xRO8OAiGGpPNjNP0jbPrb99g12vnRNsTcEwha9C2";

        URL url = new URL("http://95.85.53.176/nhi/api/app/session/get");
        HttpURLConnection connection = (HttpURLConnection)url.openConnection();
        //Set to POST
        connection.setRequestMethod("POST");
        Writer writer = new OutputStreamWriter(connection.getOutputStream());
        writer.write(query);
        writer.flush();
        writer.close();

        int status = connection.getResponseCode();

        Log.i(LOGTAG, "" + status);

        InputStream body = connection.getInputStream();

        BufferedReader in = new BufferedReader(new InputStreamReader(body));

        String inputLine;
        StringBuffer response = new StringBuffer();
        while ((inputLine = in.readLine()) != null) {
            response.append(inputLine);
        }
        in.close();

        String s = response.toString();

        Log.d(LOGTAG, s);


    } catch (Exception e) {
        // TODO Auto-generated catch block
        Log.e(LOGTAG, e.toString());

    }
}

和数据

<banner compSrc="banner1"></banner>
<banner compSrc="banner2"></banner>

模板

$scope.bannerData ={
  "banner1": {
    "heading": "Hero Test"
    },
  "banner2": {
    "heading": "Page Title (h1)"
  }
};

如何根据compSrc属性使此模板动态化？

我正在寻找类似下面的内容所以我没有更新模板。

template: '<div>BannerHeading - {{bannerData.banner2.heading}}</div>'

谢谢。

Answer 1

您可以对指令使用隔离范围。考虑名称规范化。

此处已修复JSBin

Answer 2

为您的模板创建一个指令，并使用function作为DDO的编译属性的值 Plz在SO上提到这个问题：What are the benefits of a directive template function in Angularjs?

app.directive('myDirective', function(){
      return {

        // Compile function acts on template DOM
        // This happens before it is bound to the scope, so that is why no scope
        // is injected
        compile: function(tElem, tAttrs){

          // This will change the markup before it is passed to the link function
          // and the "another-directive" directive will also be processed by Angular
          tElem.append('<div another-directive></div>');

          // Link function acts on instance, not on template and is passed the scope
          // to generate a dynamic view
          return function(scope, iElem, iAttrs){

            // When trying to add the same markup here, Angular will no longer
            // process the "another-directive" directive since the compilation is
            // already done and we're merely linking with the scope here
            iElem.append('<div another-directive></div>');
          }
        }
      }
    });

ANGULAR JS动态数据绑定到模板

2 个答案: