angular.js - Dynamically modifying the directive's templateUrl only takes effect in the controller, not in the directive.

Question

<content url="{{contentUrl}}"></<content>

//The page template can be changed by calling changeContentUrl in the controller. However, operating the url in the homeAction click event below does not take effect
var home = angular.module("home", [ "common" ]);

    home.controller("homeCtrl", function($scope, commonFactory) {
    
        $scope.contentUrl = "template/userInfo";
        $scope.changeContentUrl = function(contentUrl) {
             console.log(contentUrl);
            $scope.contentUrl = "adada"; 
        };
    });
    home.directive("content", function() {
        return {
            restrict : "E",
            template : "<p ng-include='getContentUrl()'></p>",
            link : function($scope, $element, $attr) {
                $scope.getContentUrl = function() {
                    return $attr.url;
                };
            }
        };
    });
home.directive("homeAction",function(commonFactory){
        return function($scope,element,attrs){
                var node =  element.find("li");
                node.on("click",function(event){
                    var url = $(event.target).attr("url");
                    $scope.contentUrl=url;
                    console.log($scope.contentUrl);
                });
            
        };
    });

Answer 1

homeAction has a problem:

home.directive("homeAction",function(commonFactory){
    return function($scope,element,attrs){
        var node =  element.find("li");
        node.on("click",function(event){
            var url = $(event.target).attr("url");
            $scope.contentUrl=url;
            console.log($scope.contentUrl);
        });
    };
});

function(commonFactory){ does not return directive configuration information and needs to return JSON.