Estoy trabajando con WKWebview en Xcode8, tengo códigos en HTML y Javascript usando el framework AngularJS. Mi problema es que las Directivas de AngularJS cuyas propiedades “templateUrl” no están funcionando en la vista WKWebview (es decir no se representa en la vista). El mismo código lo pruebo en el browser Safari y funciona OK. Probé con la propiedad “template” (en vez de “templateUrl”), y solo entonces puedo hacer funcionar el código en la vista WKWebview. Pienso que el problema puede estar en la configuración del WKWebview (configuración/acceso/seguridad) pero no logro resolverlo. ¿Alguien podrá tener alguna pista qué puede estar pasando?
Código "ViewController.swift":
//ViewController.swift
import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {
var webview:WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let webConfiguration = WKWebViewConfiguration()
webview = WKWebView.init(frame: CGRect(x: 15, y: 20, width: view.frame.width-30, height: view.frame.height-30), configuration: webConfiguration)
webview.uiDelegate = self
view.addSubview(webview)
let path = Bundle.main.path(forResource: "index", ofType: "html")
webview.load( URLRequest(url: URL(fileURLWithPath: path!)) )
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
Código index.html
<!doctype html>
<html>
<body ng-app="AppMarketApp">
<h1>TITLE</h1>
<div ng-controller="MainController">
<app-info info="move"></app-info>
</div>
<script src="angular.min.js"></script>
<!-- Modules -->
<script src="app.js"></script>
<!-- Controllers -->
<script src="MainController.js"></script>
<!-- Directives -->
<script src="appInfo.js"></script>
</body>
</html>
Modulo app.js
var app=angular.module('AppMarketApp',[]);
Directiva appInfo.js
app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {info: '='},
templateUrl: 'appInfo.html'
};
});
Bloque URL appInfo.html
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
Controlador MainController.js
app.controller('MainController',['$scope',function($scope){
$scope.move = {
title: 'MOVE',
developer: 'MOVE, Inc.'
}
}]);